/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
/* Responsive rules (moved from new_base_aesthetics.css) */
@media (max-width: 87.5rem) {
    html body .site_header.site_header.site_header.site_header.public_site_header.public_site_header.public_site_header {
        grid-template-rows: minmax(var(--public-shell-identity-height), auto) minmax(var(--public-shell-navigation-height), auto) !important;
        height: auto !important;
        max-height: none !important;
    }
    html body .site_header.site_header.site_header.site_header.public_site_header.public_site_header.public_site_header > .header_primary.public_header_identity_row {
        height: auto !important;
        max-height: none !important;
    }
}

/* Site header base (moved from new_base_aesthetics.css; kept first so this file's own rules still win ties) */
.site_header {
    --zone-t: var(--layout-ring); /* Oct 18 2026 - #790 same ring size as the content zone */
    --zone-top-left-corner-img: var(--theme-zone-header-top-left-corner-background-image, none);
    --zone-top-left-corner-clr: var(--theme-zone-header-top-left-corner-background-color, transparent);
    --zone-top-left-corner-img-opacity: var(--theme-zone-header-top-left-corner-background-image-opacity, 1);
    --zone-top-left-corner-clr-opacity: var(--theme-zone-header-top-left-corner-background-color-opacity, 1);
    --zone-top-left-corner-inner-glow: var(--theme-zone-header-top-left-corner-inner-glow, none);
    --zone-top-left-corner-outer-glow: var(--theme-zone-header-top-left-corner-outer-glow, none);
    --zone-top-left-corner-shadow: var(--theme-zone-header-top-left-corner-shadow, none);
    --zone-top-right-corner-img: var(--theme-zone-header-top-right-corner-background-image, none);
    --zone-top-right-corner-clr: var(--theme-zone-header-top-right-corner-background-color, transparent);
    --zone-top-right-corner-img-opacity: var(--theme-zone-header-top-right-corner-background-image-opacity, 1);
    --zone-top-right-corner-clr-opacity: var(--theme-zone-header-top-right-corner-background-color-opacity, 1);
    --zone-top-right-corner-inner-glow: var(--theme-zone-header-top-right-corner-inner-glow, none);
    --zone-top-right-corner-outer-glow: var(--theme-zone-header-top-right-corner-outer-glow, none);
    --zone-top-right-corner-shadow: var(--theme-zone-header-top-right-corner-shadow, none);
    --zone-bottom-left-corner-img: var(--theme-zone-header-bottom-left-corner-background-image, none);
    --zone-bottom-left-corner-clr: var(--theme-zone-header-bottom-left-corner-background-color, transparent);
    --zone-bottom-left-corner-img-opacity: var(--theme-zone-header-bottom-left-corner-background-image-opacity, 1);
    --zone-bottom-left-corner-clr-opacity: var(--theme-zone-header-bottom-left-corner-background-color-opacity, 1);
    --zone-bottom-left-corner-inner-glow: var(--theme-zone-header-bottom-left-corner-inner-glow, none);
    --zone-bottom-left-corner-outer-glow: var(--theme-zone-header-bottom-left-corner-outer-glow, none);
    --zone-bottom-left-corner-shadow: var(--theme-zone-header-bottom-left-corner-shadow, none);
    --zone-bottom-right-corner-img: var(--theme-zone-header-bottom-right-corner-background-image, none);
    --zone-bottom-right-corner-clr: var(--theme-zone-header-bottom-right-corner-background-color, transparent);
    --zone-bottom-right-corner-img-opacity: var(--theme-zone-header-bottom-right-corner-background-image-opacity, 1);
    --zone-bottom-right-corner-clr-opacity: var(--theme-zone-header-bottom-right-corner-background-color-opacity, 1);
    --zone-bottom-right-corner-inner-glow: var(--theme-zone-header-bottom-right-corner-inner-glow, none);
    --zone-bottom-right-corner-outer-glow: var(--theme-zone-header-bottom-right-corner-outer-glow, none);
    --zone-bottom-right-corner-shadow: var(--theme-zone-header-bottom-right-corner-shadow, none);
    --zone-top-border-img: var(--theme-zone-header-top-border-background-image, none);
    --zone-top-border-clr: var(--theme-zone-header-top-border-background-color, transparent);
    --zone-top-border-img-opacity: var(--theme-zone-header-top-border-background-image-opacity, 1);
    --zone-top-border-clr-opacity: var(--theme-zone-header-top-border-background-color-opacity, 1);
    --zone-top-border-inner-glow: var(--theme-zone-header-top-border-inner-glow, none);
    --zone-top-border-outer-glow: var(--theme-zone-header-top-border-outer-glow, none);
    --zone-top-border-shadow: var(--theme-zone-header-top-border-shadow, none);
    --zone-right-border-img: var(--theme-zone-header-right-border-background-image, none);
    --zone-right-border-clr: var(--theme-zone-header-right-border-background-color, transparent);
    --zone-right-border-img-opacity: var(--theme-zone-header-right-border-background-image-opacity, 1);
    --zone-right-border-clr-opacity: var(--theme-zone-header-right-border-background-color-opacity, 1);
    --zone-right-border-inner-glow: var(--theme-zone-header-right-border-inner-glow, none);
    --zone-right-border-outer-glow: var(--theme-zone-header-right-border-outer-glow, none);
    --zone-right-border-shadow: var(--theme-zone-header-right-border-shadow, none);
    --zone-bottom-border-img: var(--theme-zone-header-bottom-border-background-image, none);
    --zone-bottom-border-clr: var(--theme-zone-header-bottom-border-background-color, transparent);
    --zone-bottom-border-img-opacity: var(--theme-zone-header-bottom-border-background-image-opacity, 1);
    --zone-bottom-border-clr-opacity: var(--theme-zone-header-bottom-border-background-color-opacity, 1);
    --zone-bottom-border-inner-glow: var(--theme-zone-header-bottom-border-inner-glow, none);
    --zone-bottom-border-outer-glow: var(--theme-zone-header-bottom-border-outer-glow, none);
    --zone-bottom-border-shadow: var(--theme-zone-header-bottom-border-shadow, none);
    --zone-left-border-img: var(--theme-zone-header-left-border-background-image, none);
    --zone-left-border-clr: var(--theme-zone-header-left-border-background-color, transparent);
    --zone-left-border-img-opacity: var(--theme-zone-header-left-border-background-image-opacity, 1);
    --zone-left-border-clr-opacity: var(--theme-zone-header-left-border-background-color-opacity, 1);
    --zone-left-border-inner-glow: var(--theme-zone-header-left-border-inner-glow, none);
    --zone-left-border-outer-glow: var(--theme-zone-header-left-border-outer-glow, none);
    --zone-left-border-shadow: var(--theme-zone-header-left-border-shadow, none);
}

/* Desktop header winner review. Mobile rules and shared avatar CSS are intentionally excluded. */
/* ==========================================================================
 Theme Tokens
 ========================================================================== */
:root {
    /* Oct 1 2026 - her direct instruction: raised from 90rem (1440px) to
     120rem (1920px). See layouts.css's .public_three_column_layout
     comment for how the 3-column rail/center/gap widths were
     recalculated to match (rails unchanged, center +16px, gaps absorb
     the rest). */
    --site-wrapper-max-width: 120rem;
    --control-gap: 4px;
    --desktop-logo-width: clamp(220px, 24vw, 340px);
    --mobile-logo-height: 42px;
    /* Oct 9 2026 - her request: 0.5rem less padding above the identity row and 0.5rem more room below the main nav buttons (they were cut off). Total header height is unchanged. */
    --public-shell-identity-height: 5.75rem;
    --public-shell-navigation-height: 4.25rem;
    --public-shell-header-height: calc(var(--public-shell-identity-height) + var(--public-shell-navigation-height));
    --public-shell-content-width: 100%;
    --public-shell-content-padding-inline: clamp(0.5rem, 1.5vw, 1.25rem);
    --public-shell-content-gap: 1rem;
    --public-shell-heading-min-height: 4rem;
    --public-shell-action-height: 2.5rem;
    --public-shell-side-column: minmax(14rem, 18.125rem);
    --site-fixed-header-height: var(--public-shell-header-height);
}

/* ==========================================================================
 Document and Site Wrapper
 ========================================================================== */
html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background-attachment: fixed !important;
    background-color: color-mix(in srgb, var(--body-background-color) calc(var(--body-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--body-background-image), var(--body-background-gradient);
    background-repeat: var(--body-background-repeat), var(--body-background-repeat);
    box-shadow: var(--body-shadow);
}

.site_wrapper {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-wrapper-max-width);
    min-width: 0 !important;
    min-height: 100vh;
    margin-inline: auto;
    color: var(--primary-font-color);
    background-color: color-mix(in srgb, var(--page-wrapper-background-color) calc(var(--page-wrapper-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--page-wrapper-background-image), var(--page-wrapper-background-gradient);
    background-repeat: var(--page-wrapper-background-repeat), var(--page-wrapper-background-repeat);
    box-shadow: var(--page-wrapper-shadow);
    /* Oct 1 2026 - her report ("the page wrapper...should have the theme
     zones wrapping around the content -- not inside the primary
     content wrapper"): render.php already appends .theme_surface_frame
     as this element's own first child (a direct sibling of
     .site_header/main/footer, not nested inside some inner content
     div - that part was already right), but with no padding reserved
     here the frame's absolute inset:0 box still painted right over
     the header/main/footer underneath it. This padding, matching the
     frame's own corner size, is what actually clears real page
     content from under it. Duplicated from cards.css's
     .theme_surface_frame - a custom property declared on a child
     isn't visible to this (ancestor, in the DOM sense - .site_wrapper
     is .theme_surface_frame's parent) rule, so the corner-size value
     needs its own copy here too. Keep in sync if that value ever
     changes. Not visible in production today (this zone's
     background/image tokens are unset site-wide, same as the badge
     and Popup zones), so this is a correctness fix, not a visual one -
     worth a live check regardless, given it touches site_wrapper's
     box model on every page, including interaction with the sticky
     .site_header below. */
    padding: var(--layout-ring); /* Oct 18 2026 - #790 her diagram: header, columns and footer sit inside the page wrapper ring band (20px x zone scale), so no ring or frame is covered by them */
}

.site_wrapper > main {
    min-height: 0;
}

/* ==========================================================================
 Header
 ========================================================================== */
.maintenance_mode_notice + .site_header {
    outline: 1px dotted var(--header-site-header-outline-color);
    outline-offset: -3px;
}

.site_header {
    isolation: isolate;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--header-bottom-border-color) !Important;
    background-color: color-mix(in srgb, var(--header-background-color) calc(var(--header-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--header-background-image), var(--header-background-gradient);
    background-repeat: var(--header-background-repeat), var(--header-background-repeat);
    box-shadow: var(--header-shadow);
    /* Oct 18 2026 - her request: the <header> has rounded (large) bottom corners; the condensed header's are small (header_condensed.css). */
    border-radius: var(--radius-none) var(--radius-none) var(--radius-large) var(--radius-large);
}

.header_primary {
    position: relative !important;
    z-index: 4 !important;
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
    min-height: 116px;
    padding: var(--desktop-header-padding);
    align-items: center;
    gap: 1rem;
    overflow: visible !important;
    border-bottom-left-radius: var(--radius-large); /* Oct 18 2026 - her request: the identity row's bottom corners are rounded (large). */
    border-bottom-right-radius: var(--radius-large);
    /*border-bottom: 1px solid var(--primary-accent-color);*/
}

.header_tools {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
}

.header_account_utility {
    display: flex;
    min-width: max-content;
    align-items: flex-start;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.15rem;
    white-space: nowrap;
}

.header_account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    min-width: 0;
    align-items: center;
    justify-items: end;
    column-gap: 0.65rem;
}

.header_account_identity {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    flex-direction: column;
}

/* UNUSED - disabled
.header_profile_text {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
}
*/

/* RETIRED 2026-08-28: the public header no longer emits a guest identity block.
 .header_guest_identity {
 display: grid;
 padding-top: 0.15rem;
 justify-items: end;
 gap: 0.1rem;
 }
 */
.header_brand {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.header_logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.header_logo_compact {
    display: none;
}

/* Oct 18 2026 - her request: logo tint. An overlay the size of the logo link, masked by the shown logo file, paints a color and/or gradient over the logo's opaque pixels. The defaults (transparent) paint nothing. */
.header_brand_link {
    position: relative;
}

.header_brand_link::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--logo-tint-color) calc(var(--logo-tint-color-opacity, 1) * 100%), transparent);
    background-image: var(--logo-tint-background-gradient);
    -webkit-mask: var(--logo-mask-full) center / contain no-repeat;
    mask: var(--logo-mask-full) center / contain no-repeat;
}

@media (max-width: 767px) {
    .header_brand_link::after {
        -webkit-mask-image: var(--logo-mask-compact);
        mask-image: var(--logo-mask-compact);
    }
}

.header_logo_full {
    width: calc(var(--desktop-logo-width) * 0.5) !important;
    max-width: 50vw !important;
    height: auto !important;
}

/* ==========================================================================
 Public Header
 ========================================================================== */
.site_header.public_site_header {
    display: grid !important;
    grid-template-rows: var(--public-shell-identity-height) var(--public-shell-navigation-height) !important;
    box-sizing: border-box !important;
    height: calc(var(--public-shell-header-height) + 2 * var(--layout-ring)) !important;
    min-height: calc(var(--public-shell-header-height) + 2 * var(--layout-ring)) !important;
    max-height: calc(var(--public-shell-header-height) + 2 * var(--layout-ring)) !important;
    margin: 0 !important;
    padding: var(--layout-ring) !important; /* Oct 18 2026 - #790 the header ring band sits inside the header */
}

.site_header.public_site_header:not(:has(> .public_primary_navigation)):not(:has(> .header_single_page_action)) {
    grid-template-rows: var(--public-shell-identity-height) !important;
    height: calc(var(--public-shell-identity-height) + 2 * var(--layout-ring)) !important;
    min-height: calc(var(--public-shell-identity-height) + 2 * var(--layout-ring)) !important;
    max-height: calc(var(--public-shell-identity-height) + 2 * var(--layout-ring)) !important;
}

/* UNUSED - disabled
.site_header.public_site_header > .header_single_page_action {
    grid-row: 2 !important;
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--public-shell-navigation-height) !important;
    min-height: var(--public-shell-navigation-height) !important;
    max-height: var(--public-shell-navigation-height) !important;
    margin: 0 !important;
    padding: 0.5rem var(--public-shell-content-padding-inline) !important;
    align-items: center !important;
    justify-content: flex-end !important;
}
*/

.site_header.public_site_header > .header_primary.public_header_identity_row {
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, auto) minmax(12rem, 1fr) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--public-shell-identity-height) !important;
    min-height: var(--public-shell-identity-height) !important;
    max-height: var(--public-shell-identity-height) !important;
    margin: 0 !important;
    padding: 0 var(--public-shell-content-padding-inline) 0.5rem !important;
    align-items: center !important;
    gap: 1rem !important;
    overflow: visible !important;
}

.public_header_utility, .public_header_brand, .public_header_account {
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    align-items: center !important;
}

.public_header_utility {
    display: flex !important;
    justify-content: flex-start !important;
}

.public_header_utility .header_account_utility {
    display: grid !important;
    min-width: 0 !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 0.2rem !important;
}

.public_header_utility :is(.header_shop_link, .header_account_status) {
    display: inline-flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
}

.public_header_brand {
    display: flex !important;
    justify-content: center !important;
}

.public_header_brand .header_brand_link {
    display: flex !important;
    width: auto !important;
    max-width: min(26vw, 21.25rem) !important;
    height: calc(var(--public-shell-identity-height) - 1rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

.public_header_brand .header_logo_full {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.public_header_brand .header_logo_compact {
    display: none !important;
}

/* Oct 19 2026 - #809 signed-out standard header (auth pages): logo far left, Fun Stuff + Log In + Register far right. */
.site_header.public_site_header[data-header-context="standard"] > .header_primary.public_header_identity_row > .header_brand:first-child {
    grid-column: 1 !important;
    justify-content: flex-start !important;
}

.site_header.public_site_header[data-header-context="standard"] > .header_primary.public_header_identity_row > .header_guest_actions {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-items: center;
    gap: var(--gap-0-4rem);
}

.public_header_account {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2.75rem !important;
    justify-items: end !important;
    gap: 0.65rem !important;
}

.public_header_account .header_account_identity, .public_header_account .header_profile_link {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.public_header_account .header_profile_link {
    display: flex !important;
    height: 3rem !important;
    min-height: 3rem !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
}

/* Sept 19 2026 - avatar now opens the status popup via its own <button>, and
 the name kept its own link to persona.php via a second wrapper. Reset the
 button so it doesn't look or size like a form control, and let the name
 link keep the same flex/grid behavior the bare name span used to have. */
.header_profile_avatar_trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

.header_profile_link > .header_profile_name_link {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
}

/* UNUSED - disabled
.public_header_account .header_profile_text {
    display: grid !important;
    min-width: 0 !important;
    align-content: center !important;
    gap: 0.1rem !important;
}
*/

.public_header_account :is(.header_profile_name, .header_persona_type) {
    display: block !important;
    min-width: 0 !important;
    max-width: 12rem !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Oct 10 2026 - her request: the username in the header is 18px. */
/* ==========================================================================
 Public Primary Navigation
 ========================================================================== */
.site_header.public_site_header > .public_primary_navigation {
    grid-row: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--public-shell-navigation-height) !important;
    min-height: var(--public-shell-navigation-height) !important;
    max-height: var(--public-shell-navigation-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
}

.site_header.public_site_header .mobile_navigation_button {
    display: none;
}

.site_header.public_site_header .public_primary_navigation_items {
    display: flex !important;
    box-sizing: border-box !important;
    width: min(100%, 72rem) !important;
    height: var(--public-shell-navigation-height) !important;
    min-height: var(--public-shell-navigation-height) !important;
    max-height: var(--public-shell-navigation-height) !important;
    margin: 0 auto !important;
    padding: 0.125rem var(--public-shell-content-padding-inline) !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.2rem, 0.75vw, 0.55rem) !important;
    overflow: hidden !important;
    transform: none !important;
}

/* Oct 6 2026 - her report: the Your Cart link in the main nav bar showed even with an empty cart. The page marks it [hidden] (and display:none inline) until the cart has an item, but the rule below declares display:flex !important, and an !important stylesheet rule beats the hidden attribute and an inline style. A nav link that is [hidden] stays hidden. */
.site_header.public_site_header .public_primary_navigation_items > .navigation_link[hidden], .site_header.public_site_header[data-header-context="condensed"] .header_condensed_nav_slot .public_primary_navigation_items > .navigation_link[hidden] {
    display: none !important;
}

.site_header.public_site_header .public_primary_navigation_items > .navigation_link {
    position: relative !important;
    display: flex !important;
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    /* Oct 8 2026 - her request: full-screen main nav buttons are 8px wider and 5px taller so a two-line label fits. */
    max-width: calc(7rem + 8px) !important;
    height: calc(3.5rem + 5px) !important;
    min-height: calc(3.5rem + 5px) !important;
    max-height: calc(3.5rem + 5px) !important;
    margin: 0 0 3px 0 !important;
    padding: 3px 5px 3px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    overflow: hidden !important;
    text-align: center !important;
    text-decoration: none !important;
    transform: none !important;
}

.site_header.public_site_header .navigation_icon {
    display: grid !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    place-items: center !important;
}

.site_header.public_site_header .navigation_icon > img {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
}

/* Oct 13 2026 - her request: the main nav Calls glyph turns red while a missed call is unread (token --glyph-role-navigation-calls-missed-color; text and mask glyphs). */
.main_nav .navigation_link.has_missed_calls .navigation_icon {
    color: var(--glyph-role-navigation-calls-missed-color);
}

.main_nav .navigation_link.has_missed_calls .navigation_icon .glyph {
    --glyph-color: var(--glyph-role-navigation-calls-missed-color);
}

/* Oct 13 2026 - her request: every main menu glyph is the same height at every width, whatever its type (image, mask glyph, svg or text). The box above sets the height (20px, 16px on narrow); mask glyphs and svgs fill it instead of using the page-content glyph size, so Call and Shop cannot sit smaller than the rest. */
.site_header.public_site_header .navigation_icon > :is(.glyph, i, svg) {
    display: block !important;
    flex: none !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
}

/* Oct 14 2026 - her request (Post Feed main-nav glyph): a text glyph (the Home/Posts house is a unicode character in the line and solid styles) took its width from the font, 12px wide beside the 20px mask glyphs and images. A glyph box with no child element is now square like the others, so every main nav glyph occupies the same box. */
.site_header.public_site_header .navigation_icon:not(:has(> *)) {
    aspect-ratio: 1 / 1 !important;
}

.site_header.public_site_header .navigation_text {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    /* Oct 8 2026 - her request: on full screen a long main-nav label ("Community Chat") wraps onto a second line instead of ending in "...". */
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.site_header.public_site_header .header_account_identity {
    display: grid !important;
    grid-template-rows: 3rem !important;
    justify-items: end !important;
    align-content: center !important;
    gap: 0 !important;
}

.site_header.public_site_header .public_header_account {
    grid-template-columns: minmax(0, 1fr) !important;
}

.site_header.public_site_header .header_account_primary_row {
    display: flex;
    min-width: 0;
    height: 3rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.site_header.public_site_header .header_account_primary_row > .account_menu {
    position: relative;
    flex: 0 0 2.45rem;
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    margin: 0;
}

.site_header.public_site_header .header_account_primary_row > .account_menu > .account_menu_button {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.site_header.public_site_header .header_account_primary_row .header_profile_link {
    width: auto !important;
}

/* Sept 20 2026 - re-pointed from the old .account_dropdown/.header_presence_
 picker (<details>/<summary>) design to the actual current markup, the
 standalone persona-presence-dialog (see header/render.php + account_menu.php's
 own header comment) - see the header comment above this block's replacement
 in the fix script for the full story. The old <details>/<summary>-based
 .header_presence_picker element no longer exists anywhere, so it's dropped
 rather than re-pointed; only the options-list and button/swatch presentation
 carries forward, now scoped to the dialog and laid out as a static list
 instead of an absolute-positioned dropdown. */
.persona_presence_dialog .header_presence_options {
    display: grid;
    gap: .25rem;
}

.persona_presence_dialog .header_presence_options > button {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-height: 2.25rem;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    color: var(--primary-font-color);
    background: var(--secondary-color);
    border: 1px solid var(--primary-accent-color);
    border-radius: var(--radius-large);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.persona_presence_dialog .header_presence_options > button:is(:hover, :focus-visible) {
    background: var(--secondary-accent-color);
}

.persona_presence_dialog .header_presence_swatch {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--persona-presence-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-small);
}

/* RETIRED 2026-08-30: contextual L1 navigation moved into shared page-menu widgets. */
/* ==========================================================================
 Main Navigation: Shared Foundation
 ========================================================================== */
.main_nav {
    display: flex;
    padding: 0.65rem;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--control-gap);
    overflow-x: auto;
    overflow-y: hidden;
    color: var(--header-link-hover-color);
    /*background: rgb(0 0 0 / 30%);*/
    scrollbar-width: thin;
}

.main_nav .navigation_link {
    position: relative;
    display: flex;
    width: 6.25rem;
    min-height: 74px;
    padding: 0.55rem;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 6.25rem;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--primary-link-color);
    /*background: var(--primary-color);*/
    border: 1px solid transparent;
    border-radius: var(--radius-large);
    text-align: center;
    text-decoration: none;
}

/* Glyph icons. */
/* Oct 14 2026 - her request: every main nav glyph (text, mask, svg) rests on --glyph. --glyph-color carries the same value down to mask glyphs, so one color rule below drives all of them on hover and press. */
.navigation_icon {
    color: var(--glyph);
    --glyph-color: var(--glyph);
}

/* Mask-based icons. */
/* UNUSED - disabled
.navigation_icon_asset {
    display: block;
    flex: none;
    background-color: currentColor;
    -webkit-mask-image: var(--navigation-icon-mask);
    mask-image: var(--navigation-icon-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
*/

/* Uploaded-image navigation glyphs. */
.navigation_icon > img, .navigation_icon_uploaded_asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Navigation labels. */
.navigation_text {
    color: var(--primary-font-color);
}

/* ==========================================================================
 Consolidated Primary Navigation
 ========================================================================== */
.consolidated_primary_navigation {
    position: relative;
    z-index: 20;
    width: 100%;
    min-width: 0;
}

.consolidated_primary_navigation .main_nav {
    box-sizing: border-box;
    width: 66.6667%;
    min-width: 0;
    margin-inline: auto;
    padding: 0.55rem clamp(0.5rem, 2vw, 1.25rem);
    gap: clamp(0.2rem, 1vw, 0.75rem);
}

.consolidated_primary_navigation .navigation_link {
    box-sizing: border-box;
    flex: 0 0 7rem;
    min-width: 7rem;
    min-height: 3.1rem;
    padding: 0.25rem 0.4rem;
    gap: 0.2rem;
    color: var(--navigation-text-color);
    border-radius: var(--navigation-item-radius, var(--button-radius, var(--radius-large)));
}

.consolidated_primary_navigation .navigation_icon {
    display: grid;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    place-items: center;
}

/* UNUSED - disabled
.consolidated_primary_navigation .navigation_icon_asset {
    background: currentColor;
    -webkit-mask: var(--navigation-icon-mask) center/contain no-repeat;
    mask: var(--navigation-icon-mask) center/contain no-repeat;
}
*/

/* UNUSED - disabled
.consolidated_primary_navigation .navigation_icon_uploaded_asset {
    width: 1.75rem;
    height: 1.75rem;
}
*/

.consolidated_primary_navigation .navigation_text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation_activity_badge {
    position: absolute;
    top: 0.18rem;
    right: 0.35rem;
    display: grid;
    box-sizing: border-box;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.2rem;
    place-items: center;
    color: var(--primary-font-color);
    background: var(--primary-accent-color);
    border: 2px solid var(--secondary-color);
    border-radius: 999px;
}

.primary_navigation.consolidated_primary_navigation {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
}

div.main_nav {
    position: relative !important;
    top: auto !important;
}

/* ==========================================================================
 Main Navigation: Hover and Focus
 ========================================================================== */
.main_nav .navigation_link:is(:hover, :focus-visible) {
    background: var(--secondary-accent-color);
    border-color: var(--primary-accent-color);
}

.main_nav .navigation_link:is(:hover, :focus-visible) .navigation_icon {
    color: var(--glyph-role-navigation-hover-color);
    /* Oct 15 2026 - Q1211: token (default = --primary-link-hover-color) so the hover glyph color is editable per Theme */
    --glyph-color: var(--glyph-role-navigation-hover-color);
    /*filter: brightness(0) invert(1);*/
}

.main_nav .navigation_link:is(:hover, :focus-visible) .navigation_text {
    color: var(--navigation-hover-text-color) !important;
}

/* ==========================================================================
 Main Navigation: Active and Current
 ========================================================================== */
.main_nav .navigation_link.is_current {
    /*color: var(--navigation-active-text-color);*/
    /*background: var(--navigation-active-background-color);*/
    border-color: var(--navigation-current-border-color);
}

.main_nav .navigation_link:is(.is_current, :active) .navigation_icon {
    color: var(--primary-link-active-color);
    --glyph-color: var(--primary-link-active-color);
    filter: none;
}

.main_nav .navigation_link.is_current::after {
    position: absolute;
    right: 0.75rem;
    bottom: 0.25rem;
    left: 0.75rem;
    height: 3px;
    content: "";
    color: var(--header-link-hover-color);
    border-radius: 999px;
}

/* ==========================================================================
 Main Navigation: Disabled
 ========================================================================== */
.main_nav .navigation_link.is_disabled, .main_nav .navigation_link.is_disabled:is(:hover, :focus-visible) {
    color: var(--navigation-text-color);
    background: var(--navigation-background-color);
    border-color: transparent;
    box-shadow: none;
    opacity: 0.55;
    cursor: not-allowed;
}

.main_nav .navigation_link.is_disabled .navigation_icon {
    color: var(--primary-font-color);
    --glyph-color: var(--primary-font-color);
    filter: grayscale(1);
}

.main_nav .navigation_link.is_disabled .navigation_text, .main_nav .navigation_link.is_disabled:is(:hover, :focus-visible) .navigation_text {
    color: var(--font-inactive) !important;
}

/* ==========================================================================
 Desktop Header
 ========================================================================== */
@media (min-width: 1101px) {
    :root {
        --site-header-primary-row-height: 99px;
        --site-primary-navigation-row-height: 64px;
        --site-fixed-header-height: 163px;
    }
    .site_header {
        display: grid !important;
        grid-template-rows: var(--site-header-primary-row-height) var(--site-primary-navigation-row-height) !important;
        box-sizing: border-box !important;
        height: var(--site-fixed-header-height) !important;
        min-height: var(--site-fixed-header-height) !important;
        max-height: var(--site-fixed-header-height) !important;
        align-content: start !important;
    }
    .site_header > .header_primary {
        box-sizing: border-box !important;
        height: var(--site-header-primary-row-height) !important;
        min-height: var(--site-header-primary-row-height) !important;
        max-height: var(--site-header-primary-row-height) !important;
    }
    .site_header > .primary_navigation, .site_header > .primary_navigation > .main_nav {
        box-sizing: border-box !important;
        height: var(--site-primary-navigation-row-height) !important;
        min-height: var(--site-primary-navigation-row-height) !important;
        max-height: var(--site-primary-navigation-row-height) !important;
    }
    .site_header > .primary_navigation > .main_nav {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center !important;
    }
    .site_header > .primary_navigation > .main_nav .navigation_link {
        box-sizing: border-box !important;
        height: 49px !important;
        min-height: 49px !important;
        max-height: 49px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
    }
    .site_header .header_logo_full {
        max-height: calc(4.5rem - 10px) !important;
        object-fit: contain !important;
    }
}

@media (min-width: 1401px) {
    .site_header.public_site_header .public_primary_navigation_items > .navigation_link[data-desktop-display="0"] {
        display: none !important;
    }
}

@media (min-width: 1101px) and (max-width: 1400px) {
    .site_header.public_site_header .public_primary_navigation_items > .navigation_link[data-narrow-display="0"] {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .site_header.public_site_header .public_primary_navigation_items > .navigation_link[data-tablet-display="0"] {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .site_header.public_site_header .public_primary_navigation_items > .navigation_link[data-mobile-display="0"] {
        display: none !important;
    }
}

/* ==========================================================================
 Responsive Header
 ========================================================================== */
@media (max-width: 1100px) {
    /* Sept 22 2026 - "header: stop its narrow/tablet/mobile state from
     squishing main nav buttons into one small div." Root cause:
     .consolidated_primary_navigation .main_nav (above) hardcodes
     width:66.6667% with no responsive override - fine on a wide
     desktop viewport, but at narrow/tablet/mobile widths that's 66.6%
     of an already-narrow screen, crushing every nav button into a
     fraction of the available width while a third of the header sits
     empty on each side. .main_nav's own overflow-x:auto still lets it
     scroll horizontally past that point, which is what made it look
     "squished into one small div" rather than simply missing buttons. */
    .site_header > .primary_navigation.consolidated_primary_navigation > .main_nav {
        width: 100% !important;
    }
    .site_header > .primary_navigation > .main_nav {
        justify-content: flex-start !important;
    }
    .site_header > .primary_navigation > .main_nav .navigation_link {
        box-sizing: border-box !important;
        flex: 0 0 4.25rem !important;
        width: 4.25rem !important;
        min-width: 4.25rem !important;
        height: 49px !important;
        min-height: 49px !important;
        max-height: 49px !important;
        padding: 0.2rem !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
    }
}

/* ==========================================================================
 Mobile Primary Navigation
 Compact touch targets keep more destinations visible without widening the
 document. Remaining destinations stay available through horizontal scroll.

 Oct 2 2026 - raised from 480px to 50rem (800px), her direct report: "the
 entire header is a nightmare on ALL mobile versions and tablets including
 iPad MINI." This block's logo-swap/nav-font-scaling/username-hiding rules
 are the ones header_condensed.css's own header comment says it
 deliberately reuses instead of duplicating - so when the condensed
 header's own grid breakpoint (header_condensed.css) got raised to match
 the sitewide 50rem mobile/tablet convention, this block had to move with
 it or the two would disagree (condensed grid in compact mode, but logo/
 nav still sized for desktop, in the 481-800px gap). See
 header_condensed.css's matching comment for the full root cause.
 ========================================================================== */
@media (max-width: 767px) {
    :root {
        --public-shell-identity-height: 3.25rem;
        --public-shell-navigation-height: 3.75rem;
    }
    .site_header.public_site_header .header_account_identity {
        grid-template-rows: auto auto !important;
    }
    .site_header.public_site_header .header_account_primary_row, .site_header.public_site_header .header_presence_form {
        height: auto !important;
    }
    .site_header.public_site_header .header_profile_name {
        display: none !important;
    }
    .site_header.public_site_header .account_menu_mobile_label {
        display: none !important;
    }
    .site_header.public_site_header .account_menu_desktop_glyph {
        /* Oct 8 2026 - the glyph is now a fixed 20px on desktop; on mobile keep the larger size it had (the old .8em x .6em box at the 2em font) */
        inline-size: .8em;
        block-size: .6em;
    }
    .site_header.public_site_header .header_account_primary_row .header_profile_link {
        grid-template-columns: 1.75rem !important;
        width: 1.75rem !important;
    }
    .site_header.public_site_header .header_account_primary_row > .account_menu {
        flex-basis: 3rem;
        width: 3rem;
        min-width: 3rem;
    }
    .site_header.public_site_header > .header_primary.public_header_identity_row {
        z-index: 10 !important;
        grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) !important;
        padding: 0.2rem 0.5rem !important;
        gap: 0.35rem !important;
        overflow: visible !important;
    }
    .public_header_utility {
        grid-column: 1 !important;
        grid-row: 1 !important;
        overflow: hidden !important;
    }
    .public_header_utility .header_account_status {
        display: none !important;
    }
    .public_header_brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        /* Oct 2 2026 - her direct instruction: make sure the y-logo is
         fully aligned left on mobile. Root cause: the base (desktop)
         .public_header_brand rule further up this file sets
         justify-content:center !important, and this generic mobile
         block never overrode it back to flex-start - only
         header_condensed.css's own context-scoped rules did (its
         higher specificity beats header.css's base rule), so the
         STANDARD (non-condensed) header context was still centering
         the compact logo in its grid cell instead of hugging the left
         edge. Overriding here too so it's correct regardless of
         headerContext. */
        justify-content: flex-start !important;
    }
    .public_header_brand .header_brand_link {
        width: 2.5rem !important;
        max-width: 2.5rem !important;
        height: 2.5rem !important;
    }
    .public_header_brand .header_logo_full {
        display: none !important;
    }
    .public_header_brand .header_logo_compact {
        display: block !important;
        width: 2.5rem !important;
        max-width: 2.5rem !important;
        height: 2.5rem !important;
        object-fit: contain !important;
    }
    .public_header_account {
        grid-column: 3 !important;
        grid-row: 1 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.25rem !important;
        overflow: visible !important;
    }
    .site_header.public_site_header .header_account_identity, .site_header.public_site_header .header_account_primary_row, .site_header.public_site_header .header_account_primary_row > .account_menu {
        overflow: visible !important;
    }
    .site_header.public_site_header .header_account_primary_row > .account_menu {
        z-index: 20 !important;
    }
    .site_header.public_site_header .account_dropdown {
        z-index: 30 !important;
    }
    .public_header_account .header_account_identity, .public_header_account .header_profile_link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .public_header_account .header_profile_link {
        display: grid !important;
        grid-template-columns: 1.75rem minmax(0, 1fr) !important;
        height: 2.25rem !important;
        min-height: 2.25rem !important;
        gap: 0.25rem !important;
    }
    .site_header.public_site_header .header_account_primary_row .header_profile_link {
        width: auto !important;
    }
    .site_header.public_site_header .public_header_account .header_profile_link .persona_avatar_frame {
        flex: 0 0 1.75rem !important;
        width: 1.75rem !important;
        min-width: 1.75rem !important;
        max-width: 1.75rem !important;
        height: 1.75rem !important;
        min-height: 1.75rem !important;
        max-height: 1.75rem !important;
    }
    .public_header_account .header_profile_name {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 4.5rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Oct 2 2026 - her direct instruction: the main nav must NEVER show a
     scrollbar, and item names must never truncate with "..." - the font
     should scale down to fit instead. Root cause of both: items were
     fixed at width:4.25rem each - 5 items (communities/home/chats/
     calls/shop_nav) at 4.25rem = 21.25rem, wider than most phone
     viewports, so .public_primary_navigation had to scroll horizontally
     to reach them all, and .navigation_text's (otherwise-universal,
     non-mobile-specific) text-overflow:ellipsis rule further up this
     file then truncated any label too wide for its fixed-width item.
     Fixed by letting items flex to share the available width evenly
     (flex:1 1 0 instead of a fixed basis) so all 5 always fit with no
     scrolling, and giving each item container-type:inline-size so its
     label's font-size can scale down via cqw as the item compresses on
     narrower phones - same container-query-based scaling approach
     already used for the audio visualizer (post_layout.css). The clamp
     floor (0.4rem) keeps text legible rather than shrinking to nothing;
     the ceiling (0.58rem) matches the previous fixed size so nothing
     changes on wider phones where items aren't compressed. */
    .site_header.public_site_header > .public_primary_navigation {
        position: relative !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    .site_header.public_site_header .public_primary_navigation_items {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0.1rem !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: visible !important;
    }
    .site_header.public_site_header .public_primary_navigation_items > .navigation_link, .site_header > .primary_navigation > .main_nav .navigation_link {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 3.5rem !important;
        min-height: 3.5rem !important;
        max-height: 3.5rem !important;
        padding: 0.1rem !important;
        gap: 0.05rem !important;
        container-type: inline-size !important;
    }
    .site_header.public_site_header .navigation_icon {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
    }
    .site_header.public_site_header .navigation_icon > img {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
    }
    .site_header.public_site_header .navigation_text {
        text-overflow: clip !important;
    }
}

/* Oct 7 2026 - approved by her: the incoming-call card (header.js) is the chat popup's own look (call_popup_shell / header / body, call_popup.css loaded only while a call rings) docked bottom right, so a call can ring without any browser popup permission and never covers the composer. Uses the popup's own theme tokens. */
.incoming_call_dock {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 22.5rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--popup-background-color) calc(var(--popup-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--popup-background-image), var(--popup-background-gradient);
    background-repeat: var(--popup-background-repeat), var(--popup-background-repeat);
    color: var(--popup-text-color);
    z-index: 10000;
}

/* ==========================================================================
 Oct 9 2026 - #367 her report: the page header avatar frame is cut off and sits too close to the name (needs at least 5px between avatar and name). Same fit rule as the badges: the avatar shrinks only as far as needed for its frame (--persona-avatar-frame-scale, set on the avatar itself) to fit the header line, and the avatar's right margin covers the frame's overhang plus the minimum gap to the name.
 fit = min(base, room / (scale x 1.048)); margin = max(0, fit x (scale - 1) / 2 + min gap - link gap)
 ========================================================================== */
.public_header_account .header_profile_link .persona_avatar_frame.avatar {
    --header-avatar-fit: min(2rem, calc(var(--header-avatar-room) / (var(--persona-avatar-frame-scale, 1.16) * 1.048)));
    flex: 0 0 var(--header-avatar-fit) !important;
    width: var(--header-avatar-fit) !important;
    min-width: var(--header-avatar-fit) !important;
    max-width: var(--header-avatar-fit) !important;
    height: var(--header-avatar-fit) !important;
    min-height: var(--header-avatar-fit) !important;
    max-height: var(--header-avatar-fit) !important;
    margin-inline-end: max(0px, calc(var(--header-avatar-fit) * (var(--persona-avatar-frame-scale, 1.16) - 1) / 2 + 5px - 0.5rem)) !important;
}

/* Oct 19 2026 - #815 her request: on the FULL desktop header (above 1400px) the avatar's outer wrapper (its frame art) sits 10px from the name. The wrapper keeps 1rem of side padding and the link gap is 0.5rem, so the avatar's end margin is the frame overhang plus 10px minus those two (it can be negative). */
@media (min-width: 87.501rem) {
    .public_header_account .header_profile_link .persona_avatar_frame.avatar {
        margin-inline-end: calc(var(--header-avatar-fit) * (var(--persona-avatar-frame-scale, 1.16) - 1) / 2 + 10px - 0.5rem - 1rem) !important;
    }
}

@media (max-width: 767px) {
    .public_header_account .header_profile_link {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }
    .site_header.public_site_header .public_header_account .header_profile_link .persona_avatar_frame.avatar {
        --header-avatar-fit: min(1.75rem, calc(var(--header-avatar-room-narrow) / (var(--persona-avatar-frame-scale, 1.16) * 1.048)));
        flex: 0 0 var(--header-avatar-fit) !important;
        width: var(--header-avatar-fit) !important;
        min-width: var(--header-avatar-fit) !important;
        max-width: var(--header-avatar-fit) !important;
        height: var(--header-avatar-fit) !important;
        min-height: var(--header-avatar-fit) !important;
        max-height: var(--header-avatar-fit) !important;
        margin-inline-end: max(0px, calc(var(--header-avatar-fit) * (var(--persona-avatar-frame-scale, 1.16) - 1) / 2 + 5px - 0.25rem)) !important;
    }
}

/* ==========================================================================
 RESPONSIVE TIERS (Oct 11 2026)
 Mobile-first hardening for every device size in the canon (see the DevTools
 preset list). Everything above this line is the normal CSS; these blocks
 only refine it for narrower or wider screens. Add new size fixes here.
 ========================================================================== */
/* 320–375px — Mobile Small: 320 minimum, Galaxy Z Fold 6 cover (~344), Pixel 9 Pro Fold cover (~360), iPhone SE (375) */
@media (max-width: 375px) {
    /* Incoming-call dock spans the screen edge to edge on the smallest phones (and clears the home indicator). */
    .incoming_call_dock {
        left: var(--layout-page-gutter-narrow, 0.25rem);
        right: var(--layout-page-gutter-narrow, 0.25rem);
        bottom: max(var(--layout-page-gutter-narrow, 0.25rem), env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
    }
    .persona_presence_dialog .header_presence_options > button {
        white-space: normal;
    }
}

/* 376–428px — Mobile Large: iPhone 16 (393), Pixel 9 / 9 Pro / 10 and Galaxy A55 (~412), up to 428 */
@media (min-width: 376px) and (max-width: 428px) {
    .incoming_call_dock {
        bottom: max(1rem, env(safe-area-inset-bottom));
        right: max(1rem, env(safe-area-inset-right));
    }
}

/* 429–767px — large phones and small foldables: iPhone 16 Pro Max (440), iPad Mini portrait (744), Galaxy Z Fold 6 / Pixel 9 Pro Fold inner screens when narrow */
@media (min-width: 429px) and (max-width: 767px) {
    .incoming_call_dock {
        bottom: max(1rem, env(safe-area-inset-bottom));
        right: max(1rem, env(safe-area-inset-right));
    }
}

/* ==========================================================================
 Oct 11 2026 - Gift box glyph (header). Appears only while the Account has an unread gift notice.
 Full Desktop 1401+, Narrow Desktop 1025-1400 and Tablet 768-1024: a main-nav link right of Shop (.gift_notice_link_nav).
 Mobile (up to 767): that link is hidden and the same glyph shows centered in its own row under the header (.gift_notice_row).
 The glyph shakes a little, pauses, then repeats; it holds still for anyone who prefers reduced motion.
 ========================================================================== */
.gift_notice_row {
    display: none;
}

.gift_notice_link .gift_notice_glyph {
    display: inline-flex;
    transform-origin: 50% 85%;
    animation: gift_notice_shake 3s ease-in-out infinite;
}

@keyframes gift_notice_shake {
    0%, 28%, 100% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(-12deg);
    }
    8% {
        transform: rotate(10deg);
    }
    12% {
        transform: rotate(-9deg);
    }
    16% {
        transform: rotate(7deg);
    }
    20% {
        transform: rotate(-4deg);
    }
    24% {
        transform: rotate(2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift_notice_link .gift_notice_glyph {
        animation: none;
    }
}

/* Mobile 320-767 */
@media (max-width: 767px) {
    .site_header.public_site_header .public_primary_navigation_items > .navigation_link.gift_notice_link_nav {
        display: none !important;
    }
    .gift_notice_row {
        display: flex;
        justify-content: center;
        padding: 0.35rem 0;
    }
    .gift_notice_link_row {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--primary-link-color);
        text-decoration: none;
    }
}