/*
Theme Name: LITEAPKS
Theme URI: foodcenter@gmail.com
Author: Henry Themes
Author URI: mailto:foodcenter@gmail.com
Description: APK & MOD themes. contact via foodcenter@gmail.com
Version: 1.0
Text Domain: LITEAPKS
*/

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: #fbfbfb9c !important;
    font-family: 'Nunito', sans-serif !important;

}
body {
    font-family: 'Nunito', sans-serif;
}

.hide-sb::-webkit-scrollbar {
    display: none
}

.hide-sb {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.chip.active {
    background: #d2e3fc;
    border-color: transparent;
    color: #1a73e8
}

.tab-pill.active {
    background: #7bbf3a;
    border-color: transparent;
    color: white;
}

.chart-col {
    flex: 0 0 33.333%;
    min-width: 33.333%
}

@media (max-width: 1024px) {
    .chart-col {
        flex: 0 0 80%;
        min-width: 80%
    }
}

@media (max-width: 480px) {
    .chart-col {
        flex: 0 0 90%;
        min-width: 90%
    }
}

/* ========== Entry Content – reusable rich-text typography ========== */
.entry-content {
    font-size: 1rem;
    line-height: 1.85;
    color: #5a5b5c
}

.entry-content p {
    margin-bottom: 1.25rem
}

.entry-content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    color: #202124;
    border-left: 4px solid #e8710a;
    padding-left: 0.75rem
}

.entry-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: #202124;
    border-left: 3px solid #e8710a;
    padding-left: 0.75rem
}

.entry-content h4 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
    color: #202124;
    border-left: 3px solid #e8710a;
    padding-left: 0.75rem
}

.entry-content img {
    border-radius: 12px;
    margin: 1.5rem 0;
    width: 100%;
    height: auto
}

.entry-content blockquote {
    border-left: 4px solid #e8710a;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #5f6368
}

.entry-content ul,
.entry-content ol {
    margin: 1rem 0 1.25rem 1.5rem
}

.entry-content ul {
    list-style-type: disc
}

.entry-content ol {
    list-style-type: decimal
}

.entry-content li {
    margin-bottom: 0.5rem;
    line-height: 1.75
}

.entry-content a {
    text-decoration: underline
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0
}

.entry-content th,
.entry-content td {
    border: 1px solid #dadce0;
    padding: 0.5rem 0.75rem;
    text-align: left
}

.entry-content th {
    background: #f8f9fa;
    font-weight: 600
}

.entry-content pre {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0
}

.entry-content code {
    font-size: 0.875em;
    background: #f1f3f4;
    padding: 0.15em 0.4em;
    border-radius: 4px
}

.entry-content pre code {
    background: none;
    padding: 0
}

.entry-content hr {
    border: none;
    border-top: 1px solid #dadce0;
    margin: 2rem 0
}

.page-content.entry-content p {
    margin-bottom: 1.5rem;
    font-size: 16px;
    font-weight: 600;
    color: #8d8d8d;
    text-align: justify;
}

/* ===== APP INFORMATION META GRID ===== */
.app-info-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

/* Mobile: 2-column grid */
.info-bar-scroll {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}

.info-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 12px;
    gap: 4px;
}

.info-bar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #80868b;
    white-space: nowrap;
}

.info-bar-value {
    font-size: 20px;
    font-weight: 700;
    color: #202124;
    line-height: 1.1;
    white-space: nowrap;
}

.info-bar-value--sm {
    font-size: 16px;
}

.info-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #202124;
}

.info-bar-icon svg {
    width: 28px;
    height: 28px;
}

.info-bar-sub {
    font-size: 11px;
    color: #80868b;
    max-width: 120px;
    white-space: wrap;
    text-align: center;
}

.info-bar-stars {
    color: #e8710a;
    letter-spacing: 1px;
}

/* Large screen: single flex row, all items visible */
@media (min-width: 1024px) {
    .info-bar-scroll {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        padding: 16px 0;
    }

    .info-bar-item {
        flex: 1;
        min-width: 0;
        padding: 0 16px;
    }
}

/* ===== HERO + APP INFO COMBINED ===== */
.single-hero {
    position: relative;
    overflow: hidden;
    background: #202124;
}

/* Banner image */
.single-hero .hero-bg {
    position: relative;
    width: 100%;
}

.single-hero .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* DESKTOP: banner absolute, fixed height, app-info on top */
@media (min-width: 769px) {
    .single-hero {
        min-height: 600px;
    }

    .single-hero .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 420px;
        z-index: 0;
    }

    .single-hero .hero-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(to bottom,
                rgba(32, 33, 36, 0.2) 0%,
                rgba(32, 33, 36, 0.5) 50%,
                rgba(32, 33, 36, 0.9) 60%,
                #202124 100%);
    }

    .app-info-section {
        position: relative;
        z-index: 2;
        padding-top: 180px !important;
        background: transparent !important;
    }
}

/* MOBILE: stacked, banner then info */
@media (max-width: 768px) {
    .single-hero .hero-bg {
        aspect-ratio: 16/9;
    }

    .single-hero .hero-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
                transparent 20%,
                rgba(32, 33, 36, 0.7) 70%,
                #202124 100%);
    }

    .app-info-section {
        margin-top: -72px;
    }
}

/* ===== APP INFO SECTION ===== */
.app-info-section {
    color: #fff;
    padding: 24px 0 32px;
    position: relative;
    z-index: 2;
}

.app-info-icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.app-info-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-info-text {
    flex: 1;
    min-width: 0;
}

.app-info-text h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
}

.app-info-text .developer {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.app-info-text .developer a:hover {
    text-decoration: underline;
}

/* Stats Row */
.app-stat {
    flex: 0 0 auto;
    min-width: 80px;
    text-align: center;
    position: relative;
}

.app-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.app-stat .value {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.app-stat .label {
    font-size: 12px;
    color: #9aa0a6;
    margin-top: 2px;
}

/* CTA Buttons */
.app-cta {
    margin-top: 24px;
}

.btn-install {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background: #7bbf3a;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    text-align: center;
    text-decoration: none;
}

.app-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.app-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.app-action-btn:hover {
    text-decoration: underline;
}

.device-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: #9aa0a6;
}

@media (min-width: 769px) {
    .app-info-icon {
        width: 100px;
        height: 100px;
    }

    .app-info-text h1 {
        font-size: 28px;
    }

    .btn-install {
        max-width: 320px;
    }

    .app-actions {
        justify-content: flex-start;
    }
}

/* ===== SCREENSHOT GALLERY ===== */
.screenshot-section {
    padding: 24px 0;
}

.screenshot-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    max-width: 100%;
}

.screenshot-scroll::-webkit-scrollbar {
    display: none;
}

.screenshot-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.screenshot-scroll img {
    width: auto;
    height: 200px;
    border-radius: 12px;
    scroll-snap-align: start;
    flex-shrink: 0;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
    -webkit-user-drag: none;
    user-select: none;
}

@media (min-width: 1024px) {
    .screenshot-scroll img {
        height: 320px;
    }
}

.screenshot-scroll img:hover {
    transform: scale(1.02);
}

/* ===== CONTENT TABS ===== */
.content-tabs {
    display: flex;
    border-bottom: 2px solid #dadce0;
    gap: 0;
    padding-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}

.content-tabs::-webkit-scrollbar {
    display: none;
}

.content-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.content-tab {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #5f6368;
    cursor: pointer;
    border: none;
    background: none;
    white-space: nowrap;
    position: relative;
    font-family: inherit;
    transition: color 0.2s;
}

.content-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    border-radius: 3px 3px 0 0;
    transition: background 0.2s;
}

.content-tab:hover {
    color: #202124;
}

.content-tab.active {
    color: #7bbf3a;
}

.content-tab.active::after {
    background: #7bbf3a;
}

.tab-content {
    display: none;
    padding: 24px 0;
}

.tab-content.active {
    display: block;
}

/* ===== DESCRIPTION CONTENT ===== */
.desc-content {
    max-height: 300px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}

.desc-content.expanded {
    max-height: none;
}

.desc-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(transparent, #ffffff);
    pointer-events: none;
    transition: opacity 0.3s;
}

.desc-content.expanded::after {
    opacity: 0;
}

.desc-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 8px;
}

.desc-content h3:first-child {
    margin-top: 0;
}

.desc-content p {
    margin: 0 0 12px;
    color: #3c4043;
    line-height: 1.7;
}

.desc-content ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: #3c4043;
}

.desc-content ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.desc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.desc-tag {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}


.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
}

/* ===== HELP TAB ===== */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.help-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #dadce0;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.help-card:hover {
    border-color: #7bbf3a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.help-card svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.help-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
}

.help-card p {
    font-size: 13px;
    color: #5f6368;
    margin: 0;
}

.help-card--block {
    display: block;
}

.help-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}

.help-card__body {
    font-size: 13px;
    color: #5f6368;
    margin: 0;
}

/* ===== FILES TAB ===== */
.file-card {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #dadce0;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.file-card:hover {
    border-color: #7bbf3a;
}

.file-card .file-label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    background: #e6f4ea;
    color: #7bbf3a;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.file-card .file-name {
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 12px;
    word-break: break-all;
}

.file-card .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.file-info-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: 10px;
    background: #f8f9fa;
    font-size: 13px;
    color: #5f6368;
    line-height: 1.7;
}

/* ===== REQUEST UPDATE MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.95) translateY(8px);
    transition: transform 0.2s ease;
    overflow: hidden;
}

.modal-overlay.active .modal-box {
    transform: scale(1) translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #dadce0;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #5f6368;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s;
}

.modal-close-btn:hover {
    background: #f1f3f4;
}

.modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #202124;
    margin-bottom: 6px;
}

.modal-current-version {
    padding: 10px 14px;
    background: #f1f3f4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #202124;
}

.modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 14px;
    color: #202124;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-input:focus {
    border-color: #7bbf3a;
    box-shadow: 0 0 0 3px rgba(123, 191, 58, 0.15);
}

.modal-input.input-error {
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid #dadce0;
}

.modal-btn-cancel {
    padding: 9px 20px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    color: #5f6368;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.modal-btn-cancel:hover {
    background: #f1f3f4;
}

.modal-btn-submit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: #7bbf3a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.modal-btn-submit:hover {
    background: #659f2f;
}

.modal-btn-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ===== DATA SAFETY ===== */
.data-safety {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #dadce0;
}

.data-safety h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
}

.safety-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.safety-item svg {
    width: 20px;
    height: 20px;
    color: #5f6368;
    flex-shrink: 0;
    margin-top: 1px;
}

.safety-item p {
    margin: 0;
    font-size: 13px;
    color: #3c4043;
}

/* ===== RATING BAR ===== */
.rating-big {
    text-align: center;
    flex-shrink: 0;
}

.rating-big .number {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.rating-big .stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 6px;
}

.rating-big .stars svg {
    width: 16px;
    height: 16px;
    color: #e8710a;
}

.rating-big .count {
    font-size: 12px;
    color: #5f6368;
    margin-top: 4px;
}

.rating-bars {
    flex: 1;
    max-width: 300px;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.rating-bar-row .label {
    font-size: 12px;
    color: #5f6368;
    width: 8px;
    text-align: center;
}

.rating-bar-row .bar {
    flex: 1;
    height: 10px;
    background: #e8eaed;
    border-radius: 5px;
    overflow: hidden;
}

.rating-bar-row .bar .fill {
    height: 100%;
    background: #01875f;
    border-radius: 5px;
}

@media (max-width: 480px) {
    .rating-overview {
        flex-direction: column;
        align-items: center;
    }

    .rating-bars {
        max-width: 100%;
        width: 100%;
    }
}

/* ===== LIGHTBOX ===== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-nav.prev {
    left: 16px;
}

.lightbox-nav.next {
    right: 16px;
}

/* ===== SIMILAR GAMES ===== */
.similar-section {
    padding: 32px 0 0;
}

.similar-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    max-width: 100%;
}

.similar-scroll::-webkit-scrollbar {
    display: none;
}

.similar-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.similar-card {
    flex-shrink: 0;
    width: 120px;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.similar-card .icon {
    width: 86px;
    height: 86px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto 8px;
}

.similar-card .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.similar-card .name {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.similar-card .rating {
    font-size: 12px;
    color: #5f6368;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 4px;
}

.similar-card .rating svg {
    width: 12px;
    height: 12px;
}

/* ── Category Archive ── */

/* Filter strip: hide scrollbar on initial no-wrap state */
.cat-filter-strip { scrollbar-width: none; -ms-overflow-style: none; }
.cat-filter-strip::-webkit-scrollbar { display: none; }

/* Sort select chevron background (data URI, impractical as Tailwind arbitrary) */
.sort-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}

/* Pagination: WordPress paginate_links() generates .page-numbers — can't apply Tailwind to it */
.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dadce0;
    background: #ffffff;
    color: #202124;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.archive-pagination .page-numbers:hover {
    background: #f0f9e8;
    border-color: #7bbf3a;
    color: #4a7a1c;
    text-decoration: none;
}
.archive-pagination .page-numbers.current {
    background: #7bbf3a;
    border-color: #7bbf3a;
    color: #ffffff;
    cursor: default;
}
.archive-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: #6b7280;
    width: auto;
    padding: 0 4px;
    cursor: default;
}

/* Badge */
.list-view .game-card .badge-item {
    top: -10px;
    left: -10px;
}

/* Article card hover */
.article-card:hover .article-thumb img {
    transform: scale(1.05);
}

.article-card:hover .article-title {
    color: #7bbf3a;
}

.list-view .articles-grid {
    grid-template-columns: 1fr !important;
}

.list-view .article-card {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.list-view .article-thumb {
    width: 280px;
    flex-shrink: 0;
    aspect-ratio: 16/10;
}

.list-view .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.list-view .article-excerpt {
    display: block !important;
}

/* View modes */
.list-view .game-card {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    border-radius: 0;
}

.list-view .game-card .game-card-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
}

.list-view .game-thumb {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 1rem;
}

.list-view .game-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-view .game-info {
    text-align: left;
}

.list-view .game-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.list-view .game-download {
    display: block !important;
}

.list-view .game-category-inline {
    display: flex !important;
}

.grid-view .game-download {
    display: none !important;
}

.grid-view .game-category-inline {
    display: none !important;
}


/**
Hide scrollbar
 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/**
Horizontal "Top" strips (category.php / layout-post.php / browse-all.php)

Card width is derived from the strip width so a fixed number of cards is
visible per breakpoint: 4 on phones, 5 / 6 / 8 on tablets and laptops, all
10 on wide desktops. Cards beyond that scroll with snap. Devices without a
touch screen keep a thin scrollbar (there is no drag-to-scroll), touch
devices hide it. Hand-rolled here because the repo has no Tailwind build.
 */
.scroll-section {
    --top-cols: 4;
    --top-gap: 12px;
    gap: var(--top-gap);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.scroll-section .top-app-item {
    width: calc((100% - (var(--top-cols) - 1) * var(--top-gap)) / var(--top-cols));
    scroll-snap-align: start;
}

.scroll-section .top-app-title {
    font-size: 13px;
}

.scroll-section .top-app-cat {
    font-size: 11px;
}

/* Badges do not fit on a ~75px thumbnail */
.scroll-section .top-app-badges {
    display: none;
}

@media (min-width: 640px) {
    .scroll-section {
        --top-cols: 5;
        --top-gap: 16px;
    }

    .scroll-section .top-app-title {
        font-size: 14px;
    }

    .scroll-section .top-app-cat {
        font-size: 12px;
    }

    .scroll-section .top-app-badges {
        display: flex;
    }
}

@media (min-width: 768px) {
    .scroll-section {
        --top-cols: 6;
    }
}

@media (min-width: 1024px) {
    .scroll-section {
        --top-cols: 8;
    }

    .scroll-section .top-app-title {
        font-size: 15px;
    }

    .scroll-section .top-app-cat {
        font-size: 13px;
    }
}

@media (min-width: 1280px) {
    .scroll-section {
        --top-cols: 10;
    }
}

@media (hover: none) {
    .scroll-section {
        scrollbar-width: none;
    }

    .scroll-section::-webkit-scrollbar {
        display: none;
    }
}

/**
Menu
 */
#sidebar .menu-active svg {
    color: white !important;
}

/* ===== DOWNLOAD PAGE ===== */
button.dl-version-tab.active {
    background-color: #7bbf3a;
    color: white;
}

.dl-version-tab {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: #202124;
    text-align: left;
    transition: background 0.15s;
}
.dl-version-tab:hover { background: #f8f9fa; }
.dl-version-tab .chevron {
    transition: transform 0.2s;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.dl-version-tab.active .chevron { transform: rotate(180deg); }

.dl-version-panel {
    display: none;
    border-top: 1px solid #dadce0;
}
.dl-version-panel.active { display: block; }

.dl-item {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8f9fa;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    min-height: 52px;
}
.dl-item:hover { background: #e8f5e9; }

.dl-progress-bar {
    height: 6px;
    background: #e8eaed;
    border-radius: 3px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}
.dl-progress-fill {
    height: 100%;
    background: #7bbf3a;
    border-radius: 3px;
    animation: dl-progress 5s ease-in-out;
    width: 100%;
}
@keyframes dl-progress {
    0%   { width: 0; }
    100% { width: 100%; }
}

/* Fix for dynamic animate-spin via JS */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}


/* Custom Multi-Select Dropdown Styles */
.custom-select-wrapper {
    position: relative;
}

.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
}

.custom-select-trigger:hover {
    border-color: #e8710a;
}

.custom-select-trigger.active {
    border-color: #e8710a;
    box-shadow: 0 0 0 3px rgb(230 107 27 / 10%);
}

.custom-select-trigger .selected-text {
    flex: 1;
    text-align: left;
    color: #666;
}

.custom-select-trigger .selected-text.has-selection {
    color: #333;
}

.custom-select-trigger .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666;
    transition: transform 0.3s;
    margin-left: 10px;
}

.custom-select-trigger.active .arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    display: none;
}

.custom-select-dropdown.active {
    display: block;
}

.custom-select-option {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}

.custom-select-option:hover {
    background-color: #f5f5f5;
}

.custom-select-option input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #e8710a;
}

.custom-select-option input[type="radio"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #e8710a;
}

.custom-select-option label {
    cursor: pointer;
    flex: 1;
    margin: 0;
    font-size: 14px;
    color: #333;
}

/* Close dropdown when clicking outside */
.custom-select-wrapper.closing .custom-select-dropdown {
    animation: fadeOut 0.2s ease-out;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Scrollbar styling for dropdown */
.custom-select-dropdown::-webkit-scrollbar {
    width: 8px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #999;
}

#search-results-container {
    z-index: 5;
    position: absolute;
    height: auto;
    width: calc(100% - 3.4em);
    background-color: #fff;
    top: 10px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.search-result a {
    display: flex;
    height: 36px;
    align-content: center;
    gap: 10px;
    align-items: center;
}

.search-result a:hover {
    background-color: #f1f3f4;
    transition: all 0.25s ease;
}

.search-result img {
    border-radius: 7px;
}

#help-modal .nf-form-content {
    padding: 0;
}

#help-modal .nf-field-element > * {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 14px;
    color: #202124;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
}

#help-modal .nf-error.field-wrap .nf-field-element:after {
    overflow: hidden;
    border-radius: 5px;
}

#help-modal input[type=submit] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: #7bbf3a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
/* ==========================================================================
   Promo Slots
   --------------------------------------------------------------------------
   Hand-written CSS, not Tailwind: the repo ships only the compiled
   assets/css/output.css and carries no Tailwind build chain (no package.json,
   no tailwind.config.js). A utility class that is not already in that build
   would silently do nothing, so new modules style themselves here and only
   reuse classes that output.css demonstrably contains.

   Containers filled by js/promos.js start empty and stay invisible until the
   script adds .is-loaded, so a missing or disabled promo never leaves a gap.
   ========================================================================== */

.promo-store:not(.is-loaded),
.promo-geo:not(.is-loaded),
.promo-float:not(.is-loaded) {
    display: none;
}

/* Ad slot: reserves nothing until something is dropped inside it. */
.promo-ad:empty {
    display: none;
}

.promo-ad {
    margin: 16px 0;
}

/* --- App store card ------------------------------------------------------ */

.promo-store {
    margin: 16px 0;
}

.promo-store__link {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
}

.promo-store__link:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    text-decoration: none;
    color: inherit;
}

.promo-store__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: #f1f1f3;
}

.promo-store__body {
    flex: 1 1 auto;
    min-width: 0;
}

.promo-store__title {
    margin: 0;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}

.promo-store__desc {
    margin: 2px 0 0;
    color: #555;
    font-size: 13px;
    line-height: 1.35;
}

.promo-store__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #f97316;
    color: #fff;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 9999px;
    white-space: nowrap;
}

.promo-store__link:hover .promo-store__btn {
    background: #ea580c;
}

.promo-store__chevron {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .promo-store__link {
        gap: 10px;
        padding: 12px;
    }

    .promo-store__desc {
        font-size: 12px;
    }

    .promo-store__btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* --- Homepage icon grid --------------------------------------------------- */

.promo-icons__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1023px) {
    .promo-icons__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .promo-icons__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.promo-icons__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    color: #202124;
    transition: transform .2s;
}

.promo-icons__item:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: #202124;
}

.promo-icons__thumb {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    background: #f1f1f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.promo-icons__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-icons__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Recommendation row (per country) ------------------------------------ */

.promo-geo {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    padding: 16px;
    margin: 16px 0;
}

.promo-geo__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-geo__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.promo-geo__star {
    width: 20px;
    height: 20px;
    color: #7bbf3a;
    flex: 0 0 auto;
}

.promo-geo__sub {
    margin: 2px 0 12px;
    color: #555;
    font-size: 13px;
}

.promo-geo__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.promo-geo__track::-webkit-scrollbar {
    display: none;
}

.promo-geo__card {
    flex: 0 0 84px;
    width: 84px;
    text-decoration: none;
    color: #111;
}

.promo-geo__card:hover {
    text-decoration: none;
    color: #111;
}

.promo-geo__thumb {
    position: relative;
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f1f3;
}

/*
 * Phones: size the cards off the container instead of the fixed 84px, which
 * only fitted three across at 375px. 4.3 columns means four whole cards plus a
 * sliver of the fifth — the sliver is the only cue that the row scrolls, since
 * the scrollbar is hidden. The container padding drops to 12px to buy back
 * another 8px of card width.
 */
@media (max-width: 640px) {
    .promo-geo {
        padding: 12px;
    }

    .promo-geo__track {
        --geo-cols: 4.3;
        --geo-gap: 10px;
        gap: var(--geo-gap);
    }

    .promo-geo__card {
        flex: 0 0 calc((100% - (var(--geo-cols) - 1) * var(--geo-gap)) / var(--geo-cols));
        width: auto;
    }

    .promo-geo__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
    }

    .promo-geo__name {
        font-size: 12px;
    }
}

.promo-geo__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-geo__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    padding: 2px 7px;
    border-radius: 9999px;
}

.promo-geo__badge--hot {
    background: #f97316;
}

.promo-geo__badge--new {
    background: #1f2937;
}

.promo-geo__name {
    display: -webkit-box;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 32px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-geo__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
}

.promo-geo__rating .promo-geo__star {
    width: 12px;
    height: 12px;
    color: #f59e0b;
}

/* --- Floating bubble ------------------------------------------------------ */

.promo-float {
    position: fixed;
    right: 16px;
    /* Clear of the mobile bottom nav bar (footer.php), which is 56px tall. */
    bottom: 16px;
    z-index: 40;
}

@media (max-width: 767px) {
    .promo-float {
        bottom: 72px;
    }
}

.promo-float__box {
    position: relative;
}

.promo-float__link {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.promo-float__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-float__close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: rgba(17, 17, 17, .75);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

/* --- Placeholder preview (development aid, see inc/promos.php) ------------ */

.promo-ph {
    display: none;
}

.promo-preview .promo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    border: 2px dashed #c7c7cc;
    border-radius: 16px;
    color: #8e8e93;
    font-size: 13px;
    font-weight: 700;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f2f2f2 10px, #f2f2f2 20px);
}

.promo-preview .promo-ph::after {
    content: attr(data-promo-label);
}

.promo-preview .promo-ph--ad {
    height: 250px;
}

.promo-preview .promo-ph--store {
    height: 76px;
}

.promo-preview .promo-ph--geo {
    height: 160px;
}

.promo-preview .promo-ph--icons {
    height: 110px;
}

.promo-preview .promo-ph--float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    margin: 0;
    font-size: 0;
}

@media (max-width: 767px) {
    .promo-preview .promo-ph--float {
        bottom: 72px;
    }

    .promo-preview .promo-ph--ad {
        height: 100px;
    }
}

/*
 * A placeholder is only a stand-in: as soon as the real thing is present the
 * dashed box goes away. Every container is followed immediately by its own
 * placeholder in the markup, so the adjacent-sibling selector is enough — no
 * timing coordination with js/promos.js needed.
 */
.promo-preview .promo-store.is-loaded + .promo-ph,
.promo-preview .promo-geo.is-loaded + .promo-ph,
.promo-preview .promo-float.is-loaded + .promo-ph,
.promo-preview .promo-ad:not(:empty) + .promo-ph {
    display: none;
}

/* ==========================================================================
   Homepage "grid" layout — icon cards, 4 per row on phones
   --------------------------------------------------------------------------
   Hand-written rather than Tailwind utilities: grid-cols-6 is not present in
   the compiled assets/css/output.css and the repo has no Tailwind build chain,
   so those classes would silently do nothing. See inc/functions.php.

   Selected per homepage section in Lite Options → Home → Layout, so a section
   can go back to the old list layout without touching code.
   ========================================================================== */

.app-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
}

@media (min-width: 640px) {
    .app-icon-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px 12px;
    }
}

.app-icon-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #202124;
    transition: transform .2s;
    /* min-width:0 keeps a long app name from stretching its grid column. */
    min-width: 0;
}

.app-icon-card:hover {
    transform: translateY(-4px);
    text-decoration: none;
    color: #202124;
}

/*
 * The icon fills its column on phones (~77px at 375px wide) and stops growing
 * once the column gets wider than the cap, so the 6-column desktop row reads as
 * evenly spaced icons rather than six huge tiles.
 */
.app-icon-card__thumb {
    display: block;
    width: 100%;
    max-width: 96px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f1f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.app-icon-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
 * Two lines, always reserved: without the min-height a one-line name would pull
 * the rating up and the rows would no longer line up across the grid.
 */
.app-icon-card__name {
    display: -webkit-box;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-icon-card__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

.app-icon-card__rating svg {
    width: 12px;
    height: 12px;
    color: #e8710a;
}

@media (min-width: 640px) {
    .app-icon-card__name {
        font-size: 13px;
    }
}

/* ==========================================================================
   Archive pages: tighten the above-the-fold spacing on phones
   --------------------------------------------------------------------------
   Measured on /apps at 375x667 (minus the 56px fixed tab bar = 611px visible):
   the Top strip, the title row, the category chips and the view toggle pushed
   the first listing card to y=570, so only 41px of a 256px card was on screen.
   The desktop spacing is unchanged — this block only narrows the gaps below
   the sm breakpoint.

   Written here instead of as `sm:` Tailwind utilities on purpose: the repo
   ships only the compiled assets/css/output.css and has no Tailwind build
   chain, and that build contains just the handful of sm: variants the source
   already used. `sm:mb-12`, `sm:my-5`, `sm:pb-4` and `sm:py-5` are all absent,
   so writing them would silently do nothing.

   🔴 Every selector below carries an element prefix on purpose. lite_scripts()
   enqueues output.css AFTER style.css, so a bare `.archive-top` loses to
   Tailwind's `.mb-12` on source order at equal specificity — measured: the gap
   stayed at 48px until the prefixes went in. Keep them when editing.
   ========================================================================== */

@media (max-width: 639px) {
    /* 48px -> 20px. The single biggest gap on the page. */
    section.archive-top {
        margin-bottom: 1.25rem;
    }

    /* 20/20 -> 16/12 around the "Top <category>" heading. */
    div.archive-top__head {
        margin-top: 1rem;
        margin-bottom: 0.75rem;
    }

    /* Scoped to the archive strip: browse-all.php reuses .scroll-section with
       a different layout around it. */
    .archive-top .scroll-section {
        padding-bottom: 0.75rem;
    }

    div.cat-filter-strip {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    div.archive-list-wrap {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/*
 * Archive title row.
 *
 * The H1 used to be a flex container itself, which made the heading text one
 * anonymous item and the "(289)" count another: with align-items:center the
 * count floated in the middle of a two or three line title. It is plain text
 * flow now, so the count simply follows the last word.
 *
 * The sort control and the view toggle share this row (they used to cost a
 * whole extra row below). On a 320px screen that leaves the heading ~110px and
 * a name like "Video Players & Editors" breaks one word per line, so the tools
 * wrap onto their own line below that threshold instead.
 */
div.archive-head {
    flex-wrap: wrap;
}

div.archive-head > h1 {
    /* basis = the threshold, not the text width: with `auto` the heading's own
       content width (~270px) plus the tools always exceeded the viewport, so
       the tools wrapped on every screen instead of only the narrow ones. */
    flex: 1 1 140px;
}