/* Final interaction layer: loaded after visual themes so touch safety stays deterministic. */
.listing-card-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 6px;
    align-items: start;
    overflow: visible;
}

.listing-card-title-row h3 {
    min-width: 0;
    margin: 0;
}

.app-card-actions {
    position: relative;
    z-index: 5;
    align-self: start;
    justify-self: end;
    display: block !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
}

.app-listing-card.has-open-card-menu {
    z-index: 30;
}

.app-card-menu {
    position: relative !important;
    inset: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    margin: -5px 0 0 !important;
    padding: 0 !important;
    color: var(--fx-text, #191919) !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    cursor: pointer;
    touch-action: manipulation;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.app-card-menu-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    overflow: visible;
    fill: currentColor !important;
    stroke: none !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
}

[data-theme="dark"] .app-card-menu {
    color: #f5f7fb !important;
}

.app-card-menu:hover,
.app-card-menu[aria-expanded="true"] {
    background: rgba(0, 0, 0, .07) !important;
}

[data-theme="dark"] .app-card-menu:hover,
[data-theme="dark"] .app-card-menu[aria-expanded="true"] {
    background: rgba(255, 255, 255, .10) !important;
}

.app-card-menu:focus-visible {
    outline: 3px solid var(--fx-blue, #3665f3);
    outline-offset: 2px;
}

.app-listing-card h3 a {
    min-height: 44px;
}

.app-results-toolbar select {
    min-height: 40px;
}

.app-card-popover {
    position: absolute;
    top: calc(100% + 2px);
    right: -8px;
    z-index: 40;
    width: max-content;
    min-width: 180px;
    display: grid;
    gap: 2px;
    padding: 6px;
    color: var(--fx-text, #191919);
    border: 1px solid var(--fx-line, #d8d8d8);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

[data-theme="dark"] .app-card-popover {
    color: #f5f7fb;
    border-color: #354153;
    background: #101720;
}

.app-card-popover[hidden] {
    display: none !important;
    pointer-events: none;
}

.app-card-popover a,
.app-card-popover button {
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    color: inherit;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.app-card-popover a:hover,
.app-card-popover button:hover,
.app-card-popover a:focus-visible,
.app-card-popover button:focus-visible {
    color: inherit;
    outline: none;
    background: #f1f4f8;
    text-decoration: none;
}

[data-theme="dark"] .app-card-popover a:hover,
[data-theme="dark"] .app-card-popover button:hover,
[data-theme="dark"] .app-card-popover a:focus-visible,
[data-theme="dark"] .app-card-popover button:focus-visible {
    background: #1b2635;
}

.app-detail-share-button {
    min-height: 42px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 12px;
    padding: 8px 13px;
    color: var(--fx-text, #191919);
    border: 1px solid var(--fx-line, #d8d8d8);
    border-radius: 999px;
    background: var(--fx-surface, #fff);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 650;
}

.app-detail-share-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-detail-share-button:hover,
.app-detail-share-button:focus-visible {
    border-color: var(--fx-blue, #3665f3);
    color: var(--fx-blue, #3665f3);
    outline: none;
}

[data-theme="dark"] .app-detail-share-button {
    color: #f5f7fb;
    border-color: #354153;
    background: #101720;
}

.app-card-action-toast {
    position: fixed;
    left: 50%;
    bottom: calc(94px + env(safe-area-inset-bottom));
    z-index: 120;
    max-width: min(90vw, 360px);
    padding: 11px 16px;
    color: #fff;
    border-radius: 999px;
    background: #191919;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity .16s ease, transform .16s ease;
}

.app-card-action-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Closed transient overlays must never intercept taps, including on iOS Safari. */
.app-filter-backdrop:not(.is-visible),
.app-filter-backdrop[hidden],
.app-navigation-state[hidden] {
    pointer-events: none !important;
}

@media (min-width: 901px) {
    .market-utility-left a,
    .market-utility-right a {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    .breadcrumbs a {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
    }

    .site-footer a:not(.brand) {
        min-height: 28px;
        display: flex;
        align-items: center;
    }

    .app-card-action-toast {
        bottom: 28px;
    }
}

@media (max-width: 760px) {
    .listing-card-title-row {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 4px;
    }

    .app-card-actions {
        width: 44px;
        min-width: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-card-action-toast {
        transition: none;
    }
}

/* Navigation should never freeze or obscure the existing mobile catalogue.
   Only the thin progress bar remains. The previous giant, dark skeleton
   covered real products and made long server responses look like a crashed UI.
   There is no change to checkout/payment loading indicators. */
body .app-navigation-skeleton { display: none !important; }
body.is-navigating main { opacity: 1 !important; }
body .app-navigation-state:not([hidden]) {
    bottom: auto;
    height: 3px;
    background: transparent;
}