/* item-appearance-mobile.css - the mobile "details" section (owner spec 2026-09-03): the Appearance section carries .np-section--details on mobile, titled "Appearance & Basics", and shows ONE two-column grid of eight facts - Height, Body type / Bust, Hair / Eyes, Pubic hair / Nationality, Languages - labels 13/16 grey over values 16/22 ink, 16px between columns, 20px between rows, the Streamline line icons (sprite symbols st-*) beside them. The Basics section is hidden at <= 768 (its two facts are in the grid); the old icon list of this section is hidden there too. Section rhythm per the owner: 1px #ececec rule on top, padding 32px 0 24px, margin 0, title 22/26 500 #0f0f0f -0.02em, 24px title-to-content. The six-selector rule in profile12.css (~6097) / profile12-critical.css (~5580) that sets padding 0 / margin 0 0 32px for six sections is overridden here for the details section only (replacing it there would change the other five sections). Desktop (>= 769) untouched. */ .np-appearance-mobile { display: none; } .np-title-mobile { display: none; } /* the mobile section title ("Appearance & Basics"); desktop keeps "Appearance" */ .report_user_flag { display: none; } /* the Report link's flag shows on mobile only; the desktop pill is unchanged */ /* the six Streamline line icons (sprite symbols st-*, sources in the theme icons/ folder) used by the DESKTOP Appearance lists: stroke marks, never filled, ink - any inherited fill rule on .fi-icon must not paint them */ body.item .np-icon-line { fill: none !important; stroke: currentColor; color: #18181B; } body.item .np-icon-line * { fill: none; } html[data-theme="dark"] body.item .np-icon-line { color: #767d8a; } /* dark: the icon tone the old marks resolved to (dark.css late block) */ @media (max-width: 768px) { /* mobile section order (owner 2026-09-03): Photos directly after Rates (rates end with "Additional price information"), then Services, Location, Availability (5), Details (6), Basics (7) - the flex `order` values the wrapper already uses */ body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--photo-collage { order: 2 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services { order: 3 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile { order: 4 !important; } /* SECTION */ body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details .np-title-mobile { display: inline; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--appearance.np-section--details { border-top: 1px solid #ececec !important; padding: 32px 0 24px !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details .np-header { margin: 0 0 24px !important; padding: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details .np-header .np-header-icon-box { display: none !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details h2.np-title { font-size: 22px !important; line-height: 26px !important; font-weight: 500 !important; color: #0f0f0f !important; letter-spacing: -0.02em !important; margin: 0 !important; } /* GRID */ body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details .np-appearance-mobile { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 20px; margin: 0; padding: 0; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details .np-appearance-grid { display: none !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--basics { display: none !important; } /* its two facts live in the grid */ body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details .np-title-desktop { display: none; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-pair { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; min-width: 0; padding: 0; margin: 0; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-icon { grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; color: #0f0f0f; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-icon svg { width: 20px; height: 20px; display: block; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-label, body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-value { grid-column: 2; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-label { display: block; font-size: 13px; line-height: 16px; font-weight: 400; color: #6b7280; letter-spacing: 0; text-transform: none; margin: 0 0 2px; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-value { display: block; font-size: 16px; line-height: 22px; font-weight: 400; color: #0f0f0f; overflow-wrap: anywhere; } /* SERVICES (owner 2026-09-03): the Services and Location sections read as ONE "Services" section on mobile - the Services section carries the title and rhythm, the Location section continues it with no header, no rule and no gap; four stacked rows (Service type, Meeting with, Incall location, Outcall locations), the legacy "Availability information" row is dropped (the Availability section shows it). Rows = 20px icon column + label 13/16 grey over value 16/22 ink, 20px between rows. Icons: the existing marks until the owner's line icons arrive. */ body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services.np-section--services { border-top: 1px solid #ececec !important; padding: 32px 0 0 !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-header { margin: 0 0 24px !important; padding: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-header .np-header-icon-box { display: none !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-title-mobile { display: inline; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-title-desktop { display: none; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services h2.np-title { font-size: 22px !important; line-height: 26px !important; font-weight: 500 !important; color: #0f0f0f !important; letter-spacing: -0.02em !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-services-list { display: block !important; padding: 0 !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-service-row { display: block !important; padding: 0 !important; margin: 0 0 20px !important; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-service-left { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 0 !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-service-icon-circle { width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; display: flex !important; align-items: center; justify-content: center; color: #0f0f0f !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-service-icon-circle svg { width: 20px !important; height: 20px !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile.np-section--location-mobile { border-top: 0 !important; padding: 0 0 24px !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-header { display: none !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-mobile-list { display: block !important; padding: 0 !important; margin: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 0 !important; margin: 0 0 20px !important; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; border-radius: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row:last-child { margin-bottom: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row--availability { display: none !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-icon { width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; display: flex !important; align-items: center; justify-content: center; color: #0f0f0f !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-icon svg { width: 20px !important; height: 20px !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-label, body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row .np-label { display: block !important; font-size: 13px !important; line-height: 16px !important; font-weight: 400 !important; color: #6b7280 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 2px !important; padding: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-value-text, body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row .np-value-text { display: block !important; font-size: 16px !important; line-height: 22px !important; font-weight: 400 !important; color: #0f0f0f !important; margin: 0 !important; padding: 0 !important; overflow-wrap: anywhere; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services.np-section--services { border-top-color: var(--esc-dk-line, rgba(255, 255, 255, 0.08)) !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services h2.np-title { color: var(--esc-dk-text, #f2f2f4) !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-service-icon-circle, html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-icon { color: #767d8a !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-label, html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row .np-label { color: var(--esc-dk-muted, #a1a7b3) !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--services .np-value-text, html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--location-mobile .np-location-row .np-value-text { color: #D8DAE0 !important; } /* Report link (owner 2026-09-03, Airbnb pattern): the owner's flag icon + "Report user" in ink, underlined, no pill */ body.item.item-airbnb-layout .item-airbnb-body-panel .report_user { display: flex !important; /* its own row: rule, 24, link, 24, then the feed rule (rhythm 2026-09-03) */ justify-content: flex-start; width: 100% !important; align-items: center; gap: 8px; margin: 0 !important; padding: 24px 0 !important; border: 0 !important; border-top: 1px solid #ececec !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #0f0f0f !important; /* owner: flag and text dark black */ font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important; text-decoration: underline !important; text-underline-offset: 3px; text-transform: none !important; letter-spacing: 0 !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .report_user:hover { background: none !important; border-color: #ececec !important; color: #0f0f0f !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .report_user::before, body.item.item-airbnb-layout .item-airbnb-body-panel .report_user::after { content: none !important; display: none !important; } body.item.item-airbnb-layout .item-airbnb-body-panel .report_user .report_user_flag { display: block; width: 18px; height: 18px; flex: 0 0 18px; color: #0f0f0f; } /* dark.css loads after this sheet and restyles the pill with !important - outrank it (a.report_user.report_user) */ html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel a.report_user.report_user, html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel a.report_user.report_user:hover { background: none !important; border-color: var(--esc-dk-line) !important; /* keeps the row's top hairline in dark (rhythm 2026-09-03) */ box-shadow: none !important; color: #D8DAE0 !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel a.report_user.report_user .report_user_flag { color: #767d8a !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details { border-top-color: var(--esc-dk-line, rgba(255, 255, 255, 0.08)) !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-section--details h2.np-title { color: var(--esc-dk-text, #f2f2f4) !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-icon { color: #767d8a; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-label { color: #9BA1AC; } /* dark row label tone (dark.css late block) */ html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-body-panel .np-appearance-mobile-value { color: #D8DAE0; } /* dark: the row-value tone (dark.css late block, owner) */ } /* ---- "My blog and feed" pill beside the About me title (mobile) - 2026-09-03 ---- item.php wraps the mobile About h2 + the plugin's nzbf_profile_button(...,'mobile') in .item-airbnb-about-head. The plugin sheet (nz_blog_feed/css/nzbf.css) styles the pill as a full-width 48px button under the text; these rules turn it into the compact pill of the owner's mock: label + count chip + chevron, no document icon. ≤768 only (the block is hidden on desktop by profile12). */ @media (max-width: 768px) { body.item.item-airbnb-layout .item-airbnb-about-mobile .item-airbnb-about-head { display: flex; align-items: center; /* the h2's caps render centred in its 25px line box (measured), so centring the 34px pill on the row centres it on the letters */ justify-content: space-between; gap: 12px; margin: 0 0 24px; } body.item.item-airbnb-layout .item-airbnb-about-mobile .item-airbnb-about-head h2 { margin: 0 !important; flex: 1 1 auto; min-width: 0; } body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-profile-btn--mobile { display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; min-height: 0; height: 34px; margin: 0; padding: 0 10px 0 14px; gap: 6px; font-size: 14px; line-height: 1; color: #0f0f0f; background: #fff; border: 1px solid #e5e5e5; border-radius: 999px; } body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-profile-btn--mobile .nzbf-ic:not(.nzbf-ic--chevron) { display: none; } body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-profile-btn-label { font-weight: 500; white-space: nowrap; } body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-profile-btn-count { min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; font-size: 12px; font-weight: 500; color: #0f0f0f; background: #f2f2f2; } body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-ic--chevron { width: 14px; height: 14px; opacity: 1; color: inherit; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-profile-btn--mobile { color: #e2e4e9 !important; background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html[data-theme="dark"] body.item.item-airbnb-layout .item-airbnb-about-head .nzbf-profile-btn-count { color: #0f0f0f !important; background: #e5e7eb !important; } } /* ---- price / location feature row: fixed price cell, flexible location cell (mobile) - 2026-09-03 ---- Owner spec (rev 2). profile12.css (@media max-width 768, ~4470-4566) splits the row 1fr/1fr and centres both cells, so three suburbs wrap into a narrow centred block and the pin drifts with them. Here: a 64px row of 118px price column + flexible location column; the location cell is an icon column (20px) + text column, both centred on the row, the value clamped to two lines (the full list lives in the Services section); the price cell is centred with "$284" as one string (item.php prints the $, the dollar icon is gone). Same specificity as profile12, loaded later, so these win; the row's margin/padding !important rules in profile12 are untouched. <=768 only (desktop uses .item-airbnb-feature-row--desktop). */ @media (max-width: 768px) { body.item.item-airbnb-layout .item-airbnb-feature-row.item-airbnb-feature-row--two { grid-template-columns: 118px minmax(0, 1fr); column-gap: 18px; align-items: start; /* rev 3: both cells anchored to the top so "$284", the pin and the first suburb line share one line; extra suburb text wraps below */ height: 64px; } body.item.item-airbnb-layout .item-airbnb-feature-col { height: 64px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 0; text-align: left; } body.item.item-airbnb-layout .item-airbnb-feature-col + .item-airbnb-feature-col--location { /* sibling form: outranks profile12's `.item-airbnb-feature-col + .item-airbnb-feature-col` #e0e0e0 divider */ border-left: 1px solid #ececef; padding-left: 18px; } /* location cell: icon column + text column, both on the first 20px line of the cell */ body.item.item-airbnb-layout .item-airbnb-feature-top { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; justify-content: normal; width: 100%; } body.item.item-airbnb-layout .item-airbnb-feature-icon { width: 20px; height: 20px; align-self: start; /* fixed spot: the 20px pin sits on the value's first 20px line */ margin-top: 0; } body.item.item-airbnb-layout .item-airbnb-feature-copy { display: block; min-width: 0; text-align: left; } body.item.item-airbnb-layout .item-airbnb-feature-value { font-size: 16px; line-height: 20px; font-weight: 500; display: block; white-space: nowrap; /* rev 4: one line - item.php caps the list to two names + count, the rest ellipsises */ overflow: hidden; text-overflow: ellipsis; } body.item.item-airbnb-layout .item-airbnb-feature-subtitle { font-size: 13px; line-height: 16px; margin-top: 3px; text-align: inherit; } body.item.item-airbnb-layout .item-airbnb-feature-subtitle-row { justify-content: flex-start; } /* price cell: centred, "$284" as one string, no separate dollar icon */ body.item.item-airbnb-layout .item-airbnb-feature-col--price { justify-content: center; text-align: center; } body.item.item-airbnb-layout .item-airbnb-feature-col--price .item-airbnb-feature-top { grid-template-columns: minmax(0, 1fr); width: auto; } body.item.item-airbnb-layout .item-airbnb-feature-col--price .item-airbnb-feature-copy { text-align: center; } }