/* Fanscribers OF Grid v3 - wine editorial style test */

body.fog-full-width #primary,
body.no-sidebar #primary,
body.fog-full-width .site-main,
body.no-sidebar .site-main {
    width:100%!important;
    max-width:100%!important;
    float:none!important;
    margin-right:0!important;
}

body.fog-full-width #secondary,
body.no-sidebar #secondary {
    display:none!important;
}

.fog-site-main {
    --fog-brand:#9E1140;
    --fog-brand-dark:#7f0d33;
    --fog-brand-soft:rgba(158,17,64,.1);
    --fog-brand-border:rgba(158,17,64,.16);
    --fog-brand-glow:rgba(158,17,64,.24);
    --fog-neon-cyan:#19e6ed;
    --fog-neon-pink:#e669ff;
    --fog-card:#FAFAFA;
    --fog-page:#fff;
    --fog-text:#181214;
    --fog-muted:#70656a;
    --fog-line:rgba(24,18,20,.08);
    --fog-grid-gap-desktop:18px;
    --fog-grid-gap-mobile:12px;
    --fog-grid-standard-desktop:1200px;
    --fog-grid-standard-mobile:320px;
    background:var(--fog-page);
    color:var(--fog-text);
}

.fog-site-main,
.fog-site-main * {
    letter-spacing:0;
}

.fog-page-header {
    margin:0;
    padding:16px 12px 20px;
    background:
        linear-gradient(180deg, rgba(158,17,64,.055), rgba(255,255,255,0) 72%),
        #fff;
    border-bottom:1px solid var(--fog-line);
}

.fog-page-header-inner {
    position:relative;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding-left:174px;
    padding-right:96px;
}

.fog-home-link {
    position:absolute;
    top:8px;
    left:8px;
    display:inline-flex;
    align-items:center;
    max-width:160px;
    min-height:38px;
    padding:8px 11px;
    border:2px solid rgba(158,17,64,.32);
    border-radius:7px;
    background:#fff;
    color:var(--fog-brand);
    font-size:13px;
    font-weight:800;
    line-height:1.15;
    text-align:left;
    text-decoration:none!important;
}

/* Home-link is only meaningful on affiliate pages (it links visitors back
   to the OF site root from a third-party traffic landing). Hide on the
   canonical /onlyfans/ and re-balance the header padding so the H1 stays
   centered. The padding rebalance is desktop-only — on mobile the inner
   already uses padding-left:0/padding-right:0. */
body.fog-full-width:not(.fog-affiliate-page) .fog-home-link {
    display:none!important;
}

@media(min-width:600px) {
    body.fog-full-width:not(.fog-affiliate-page) .fog-page-header-inner {
        padding-left:96px;
    }
}

.fog-home-title {
    display:block;
    overflow:hidden;
    max-width:100%;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.fog-header-logo-wrap {
    position:absolute;
    top:0;
    right:0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    width:70px;
}

.fog-header-logo {
    display:block;
    width:70px;
    height:auto;
}

.fog-page-title {
    margin:0;
    color:var(--fog-brand);
    font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    font-size:28px;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-.02em;
    text-align:center;
}

.fog-location-line {
    display:flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    font-size:15px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fog-location-line.is-hidden,
.fog-location-line[hidden] {
    display:none;
}

.fog-location-line--pending .fog-location-pin {
    opacity:0;
}

.fog-location-line--pending .fog-location-text {
    visibility:hidden;
}

.fog-location-pin {
    font-size:32px;
    line-height:1;
}

.fog-location-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:46px;
    padding:10px 14px;
    border:1px solid rgba(199, 37, 78, .26);
    border-radius:999px;
    background:#c7254e;
    color:#fff;
    box-shadow:0 10px 24px rgba(158,17,64,.14);
    white-space:nowrap;
}

.fog-location-text {
    font-size:22px;
    line-height:1;
}

.fog-location-line--pending .fog-location-badge {
    background:rgba(199, 37, 78, .08);
    box-shadow:none;
}

.fog-subtext {
    max-width:760px;
    margin-top:10px;
    margin-right:auto;
    margin-left:auto;
    color:var(--fog-muted);
    font-size:15px;
    line-height:1.55;
    text-align:center;
}

.fog-sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
}

.fog-wrapper {
    width:100%;
    padding:24px 0 52px;
}

.fog-search-wrap {
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:min(100% - 24px, 560px);
    margin:0 auto 18px;
    padding:8px 0;
}

.fog-search-control {
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    min-height:44px;
    border:1px solid var(--fog-brand-border);
    border-radius:8px;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 24px rgba(24,18,20,.09);
    backdrop-filter:blur(12px);
}

.fog-search-icon {
    display:flex;
    width:42px;
    flex:0 0 42px;
    align-items:center;
    justify-content:center;
    color:var(--fog-brand);
}

.fog-search-icon svg,
.fog-search-clear svg {
    display:block;
    width:18px;
    height:18px;
}

.fog-profile-search {
    width:100%;
    min-width:0;
    min-height:42px;
    border:0!important;
    outline:0;
    background:transparent!important;
    color:var(--fog-text);
    font-size:15px;
    line-height:1.2;
    box-shadow:none!important;
}

.fog-profile-search::placeholder {
    color:rgba(112,101,106,.78);
}

.fog-profile-search::-webkit-search-cancel-button {
    appearance:none;
}

.fog-search-clear {
    display:flex;
    width:38px;
    height:38px;
    flex:0 0 38px;
    align-items:center;
    justify-content:center;
    margin-right:3px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--fog-muted);
    cursor:pointer;
}

.fog-search-clear[hidden] {
    display:none;
}

.fog-search-clear:hover {
    background:var(--fog-brand-soft);
    color:var(--fog-brand);
}

.fog-search-status {
    min-height:18px;
    margin-top:4px;
    color:var(--fog-muted);
    font-size:12px;
    line-height:1.4;
}

.fog-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, calc((var(--fog-grid-standard-desktop) - (var(--fog-grid-gap-desktop) * (var(--fog-card-columns-desktop, 4) - 1))) / var(--fog-card-columns-desktop, 4))), 1fr));
    gap:var(--fog-grid-gap-desktop);
}

.fog-grid.fog-grid--compact-results {
    --fog-search-card-width:calc((var(--fog-grid-standard-desktop) - (var(--fog-grid-gap-desktop) * (var(--fog-card-columns-desktop, 4) - 1))) / var(--fog-card-columns-desktop, 4));
    grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--fog-search-card-width)), var(--fog-search-card-width)));
    justify-content:center;
}

.fog-grid > .fog-card:only-child {
    width:100%;
    max-width:calc((var(--fog-grid-standard-desktop) - (var(--fog-grid-gap-desktop) * (var(--fog-card-columns-desktop, 4) - 1))) / var(--fog-card-columns-desktop, 4));
    justify-self:center;
}

@media(max-width:599px) {
    .fog-page-header {
        padding-top:0;
        padding-bottom:14px;
    }

    .fog-page-title {
        font-size:22px;
    }

    .fog-page-header-inner {
        padding-left:0;
        padding-right:0;
    }

    .fog-home-link {
        position:relative;
        top:auto;
        left:auto;
        max-width:calc(100% - 64px);
        min-height:32px;
        margin-top:8px;
        margin-bottom:8px;
        margin-left:4px;
        padding:6px 9px;
        font-size:11px;
    }

    .fog-header-logo-wrap {
        top:6px;
        right:6px;
        width:42px;
    }

    .fog-header-logo {
        width:42px;
    }

    .fog-location-line {
        min-height:40px;
        margin-top:10px;
        gap:6px;
        font-size:12px;
    }

    .fog-location-badge {
        min-height:38px;
        padding:8px 12px;
    }

    .fog-location-pin {
        font-size:24px;
    }

    .fog-location-text {
        font-size:18px;
    }

    .fog-grid {
        grid-template-columns:repeat(auto-fit, minmax(min(100%, calc((var(--fog-grid-standard-mobile) - (var(--fog-grid-gap-mobile) * (var(--fog-card-columns-mobile, 2) - 1))) / var(--fog-card-columns-mobile, 2))), 1fr));
        gap:var(--fog-grid-gap-mobile);
    }

    .fog-grid.fog-grid--compact-results {
        --fog-search-card-width:calc((var(--fog-grid-standard-mobile) - (var(--fog-grid-gap-mobile) * (var(--fog-card-columns-mobile, 2) - 1))) / var(--fog-card-columns-mobile, 2));
        grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--fog-search-card-width)), var(--fog-search-card-width)));
    }

    .fog-grid > .fog-card:only-child {
        max-width:calc((var(--fog-grid-standard-mobile) - (var(--fog-grid-gap-mobile) * (var(--fog-card-columns-mobile, 2) - 1))) / var(--fog-card-columns-mobile, 2));
    }

    #fog-grid-wrapper {
        padding-right:4px;
        padding-left:4px;
    }

    .fog-search-wrap {
        width:calc(100% - 8px);
        margin-bottom:12px;
        padding-top:6px;
    }

    .fog-search-control {
        min-height:40px;
    }

    .fog-search-icon {
        width:36px;
        flex-basis:36px;
    }

    .fog-profile-search {
        min-height:38px;
        font-size:14px;
    }

    .fog-search-clear {
        width:34px;
        height:34px;
        flex-basis:34px;
    }
}

.fog-card {
    position:relative;
    display:flex;
    min-width:0;
    height:100%;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--fog-brand-border);
    border-radius:8px;
    background:var(--fog-card);
    color:var(--fog-text);
    text-decoration:none!important;
    box-shadow:
        0 2px 10px rgba(24,18,20,.06),
        0 0 0 1px rgba(25,230,237,.14),
        0 4px 14px rgba(230,105,255,.08);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fog-card:hover {
    transform:translateY(-3px);
    border-color:rgba(230,105,255,.42);
    color:var(--fog-text);
    text-decoration:none!important;
    box-shadow:
        0 10px 22px rgba(24,18,20,.10),
        0 0 0 1px rgba(230,105,255,.42),
        0 0 18px rgba(25,230,237,.28),
        0 0 22px rgba(230,105,255,.28);
}

.fog-card--api {
    border-color:rgba(230,105,255,.30);
    box-shadow:
        0 3px 12px rgba(24,18,20,.07),
        0 0 0 1px rgba(230,105,255,.26),
        0 0 14px rgba(25,230,237,.18),
        0 0 18px rgba(230,105,255,.18);
}

body.fog-full-width:not(.fog-affiliate-page) .fog-card--api {
    border:2px solid rgba(25,230,237,.62);
    box-shadow:
        0 4px 14px rgba(24,18,20,.08),
        0 0 0 1px rgba(230,105,255,.38),
        0 0 18px rgba(25,230,237,.34),
        0 0 24px rgba(230,105,255,.28);
}

body.fog-full-width:not(.fog-affiliate-page) .fog-card--api:hover {
    border-color:rgba(25,230,237,.9);
    box-shadow:
        0 12px 24px rgba(24,18,20,.12),
        0 0 0 1px rgba(230,105,255,.62),
        0 0 24px rgba(25,230,237,.48),
        0 0 34px rgba(230,105,255,.36);
}

.fog-card-img {
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    background:#f1eef0;
    border-bottom:1px solid var(--fog-line);
}

.fog-card-img img {
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:top center;
    transition:transform .35s ease, filter .35s ease;
}

.fog-card-img-primary,
.fog-card-img-secondary {
    position:absolute;
    inset:0;
}

.fog-card-img-primary {
    z-index:0;
}

.fog-card-img-secondary {
    z-index:1;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .35s ease, filter .35s ease;
}

.fog-card--image-swap:hover .fog-card-img-secondary,
.fog-card--image-swap:focus-visible .fog-card-img-secondary,
.fog-card--image-swap:active .fog-card-img-secondary,
.fog-card--image-swap.fog-card--touch-preview .fog-card-img-secondary {
    opacity:1;
}

.fog-card:hover .fog-card-img img {
    transform:scale(1.055);
    filter:saturate(1.04);
}

.fog-card-overlay {
    position:absolute;
    inset:auto 0 0;
    z-index:2;
    height:36%;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(230,105,255,.16));
    opacity:.85;
    pointer-events:none;
}

.fog-card--free::after {
    content:"FREE";
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:5px 9px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:6px;
    background:linear-gradient(135deg, #ec4899 0%, #e669ff 100%);
    color:#fff;
    font-size:11px;
    font-weight:800;
    line-height:1;
    box-shadow:0 8px 18px rgba(24,18,20,.18), 0 0 18px rgba(230,105,255,.34);
}

.fog-ad-badge {
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:2;
    padding:2px 6px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:4px;
    background:rgba(24,18,20,.58);
    color:rgba(255,255,255,.78);
    font-size:9px;
    font-weight:700;
    line-height:1.2;
    pointer-events:none;
}

.fog-card-meta {
    position:relative;
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
    /* Keep at least ~14px between the model name and the CTA, even on
       cards with the shortest possible content (single-line name, no stats). */
    min-height:96px;
    padding:12px;
    text-align:left;
}

.fog-card-name {
    display:-webkit-box;
    overflow:hidden;
    color:#8b1458;
    font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    font-size:18px;
    font-weight:700;
    line-height:1.16;
    text-overflow:ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

/* Single compact line below the model name carrying every enabled meta
   field: @username (its own toggle) + location/photos/videos/likes (all
   gated by the Show stats toggle). One ellipsis-truncated line keeps card
   heights consistent across a row, which keeps the CTAs visually aligned. */
.fog-card-meta-line {
    display:block;
    overflow:hidden;
    margin-top:6px;
    color:var(--fog-muted);
    font-size:11px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.fog-card-cta {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:38px;
    /* Bottom-align the CTA across cards in the same grid row so all
       buttons line up. Stats now live in a single compact .fog-card-meta-line
       so this rarely produces a tight gap. */
    margin-top:auto;
    padding:9px 10px;
    border:2px solid var(--fog-neon-pink);
    border-radius:7px;
    background:linear-gradient(135deg, rgba(254,243,199,.9) 0%, rgba(253,232,255,.9) 100%);
    color:#9d174d;
    font-size:13px;
    font-weight:800;
    line-height:1.15;
    text-align:center;
    box-shadow:0 0 14px 0 rgba(230,105,255,.66);
    transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.fog-card-cta-icon {
    display:inline-flex;
    width:22px;
    height:22px;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
}

.fog-card-cta-icon svg {
    display:block;
    width:100%;
    height:100%;
}

/* OF logo isn't square (~1.48:1) — give it more horizontal room and
   keep aspect via object-fit. */
.fog-card-cta-icon--logo {
    width:30px;
    height:20px;
}

.fog-card-cta-icon--logo img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.fog-card-cta-label {
    display:inline-block;
}

.fog-card:hover .fog-card-cta {
    background:linear-gradient(135deg, rgba(253,232,255,.98) 0%, rgba(250,204,245,.96) 100%);
    box-shadow:0 0 18px 0 rgba(230,105,255,.82), 0 0 26px rgba(230,105,255,.28);
    transform:translateY(-1px);
}

.fog-card--blog .fog-card-name {
    color:var(--fog-text);
    font-size:17px;
}

.fog-card--blog .fog-card-cta {
    background:linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(253,232,255,.88) 100%);
    color:#9d174d;
    box-shadow:0 0 12px 0 rgba(230,105,255,.42);
}

.fog-card--blog:hover .fog-card-cta {
    background:linear-gradient(135deg, rgba(253,232,255,.98) 0%, rgba(250,204,245,.96) 100%);
    color:#831843;
    box-shadow:0 0 18px 0 rgba(230,105,255,.78), 0 0 24px rgba(230,105,255,.24);
}

.fog-loading-spinner,
.fog-loading-bar {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--fog-muted);
}

.fog-loading-spinner {
    grid-column:1/-1;
    padding:80px 0;
    font-size:15px;
}

.fog-loading-bar {
    padding:28px 0;
    font-size:14px;
}

.fog-load-more {
    display:block;
    min-height:40px;
    margin:26px auto 0;
    padding:10px 18px;
    border:2px solid rgba(230,105,255,.74);
    border-radius:8px;
    background:var(--fog-brand);
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:
        0 0 0 1px rgba(25,230,237,.36),
        0 0 16px rgba(230,105,255,.72),
        0 0 28px rgba(25,230,237,.22),
        0 8px 18px rgba(158,17,64,.22);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.fog-load-more:hover {
    border-color:rgba(25,230,237,.86);
    background:var(--fog-brand-dark);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(230,105,255,.5),
        0 0 20px rgba(230,105,255,.86),
        0 0 34px rgba(25,230,237,.34),
        0 10px 22px rgba(158,17,64,.28);
}

.fog-load-more:disabled {
    cursor:default;
    opacity:.55;
}

.fog-spinner {
    display:inline-block;
    width:20px;
    height:20px;
    flex-shrink:0;
    border:3px solid rgba(158,17,64,.12);
    border-top-color:var(--fog-brand);
    border-radius:50%;
    animation:fog-spin .65s linear infinite;
}

.fog-empty {
    grid-column:1/-1;
    padding:60px 20px;
    color:var(--fog-muted);
    text-align:center;
}

.fog-sentinel,
#fog-sentinel {
    grid-column:1/-1;
    height:1px;
    pointer-events:none;
}

.fog-no-img {
    width:100%;
    height:100%;
    background:linear-gradient(135deg, #f7f3f5, #eadbe1);
}

.fog-no-img::after {
    content:"";
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    color:rgba(158,17,64,.2);
    font-family:"Playfair Display", Georgia, "Times New Roman", serif;
    font-size:40px;
}

.fog-pagination {
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin:26px 0 0;
}

.fog-pagination .page-numbers {
    min-width:38px;
    padding:9px 12px;
    border:1px solid var(--fog-brand-border);
    border-radius:7px;
    background:#fff;
    color:var(--fog-brand);
    font-size:14px;
    line-height:1;
    text-align:center;
    text-decoration:none!important;
}

.fog-pagination .page-numbers:hover,
.fog-pagination .page-numbers.current {
    border-color:var(--fog-brand);
    background:var(--fog-brand);
    color:#fff;
    text-decoration:none!important;
}

#fog-grid-wrapper,
#fog-grid-wrapper * {
    box-sizing:border-box;
}

#fog-grid-wrapper {
    max-width:100%;
    margin:0 auto;
    padding-right:12px;
    padding-left:12px;
}

#fog-grid a {
    border-bottom:0!important;
}

#fog-grid img {
    max-width:none;
}

body.fog-full-width .fog-page-header,
body.fog-full-width #fog-grid-wrapper {
    width:100%;
}

body.fog-full-width.fog-affiliate-page #masthead {
    display:none!important;
    margin-bottom:0!important;
    padding:0!important;
    border-bottom:1px solid var(--fog-line);
}

body.fog-full-width.fog-affiliate-page #masthead .middle-header-part {
    min-height:50px!important;
    height:50px!important;
    max-height:50px!important;
    padding-top:0!important;
    padding-bottom:0!important;
}

body.fog-full-width.fog-affiliate-page #masthead .middle-header-part > .ascendoor-wrapper {
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    display:flex!important;
    align-items:center!important;
}

body.fog-full-width.fog-affiliate-page #masthead .middle-header-wrapper {
    min-height:50px!important;
    height:50px!important;
    max-height:50px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    gap:18px!important;
}

body.fog-full-width.fog-affiliate-page #masthead .mobile-header-top {
    min-height:50px!important;
    height:50px!important;
    max-height:50px!important;
    padding-top:0!important;
    padding-bottom:0!important;
}

body.fog-full-width.fog-affiliate-page #masthead .mobile-header-top > .ascendoor-wrapper {
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    display:flex!important;
    align-items:center!important;
}

body.fog-full-width.fog-affiliate-page #masthead .mobile-header-top-wrapper {
    min-height:50px!important;
    height:50px!important;
    max-height:50px!important;
    padding-top:0!important;
    padding-bottom:0!important;
}

body.fog-full-width.fog-affiliate-page #masthead .bottom-header-wrapper,
body.fog-full-width.fog-affiliate-page #masthead .bottom-header-part {
    display:none!important;
}

body.fog-full-width.fog-affiliate-page #masthead .site-branding {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

body.fog-full-width.fog-affiliate-page #masthead .site-identity {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:0!important;
    position:relative!important;
    top:-3px!important;
}

body.fog-full-width.fog-affiliate-page #masthead .site-title,
body.fog-full-width.fog-affiliate-page #masthead .site-description {
    margin:0!important;
}

body.fog-full-width.fog-affiliate-page #masthead .site-title a {
    font-size:13.2px!important;
    line-height:1!important;
}

body.fog-full-width.fog-affiliate-page #masthead .site-description {
    display:block!important;
    margin-top:-3px!important;
    font-size:10px!important;
    line-height:1!important;
}

body.fog-full-width.fog-affiliate-page #masthead .main-navigation .menu > li > a,
body.fog-full-width.fog-affiliate-page #masthead .main-navigation .nav-menu > li > a {
    padding-top:6px!important;
    padding-bottom:6px!important;
    font-size:12px!important;
    line-height:1.05!important;
}

body.fog-full-width.fog-affiliate-page #masthead .sub-menu a {
    font-size:11px!important;
}

body.fog-full-width.fog-affiliate-page #masthead .theme-toggle-btn,
body.fog-full-width.fog-affiliate-page #masthead .header-search-icon {
    transform:scale(.78);
    transform-origin:center;
}

body.fog-full-width.fog-affiliate-page #masthead .free-of-button {
    transform:scale(.64);
    transform-origin:right center;
}

body.fog-full-width.fog-affiliate-page #masthead .navigation-part,
body.fog-full-width.fog-affiliate-page #masthead .main-navigation,
body.fog-full-width.fog-affiliate-page #masthead .menu-main-container,
body.fog-full-width.fog-affiliate-page #masthead .main-navigation > div > ul,
body.fog-full-width.fog-affiliate-page #masthead .main-navigation .nav-menu {
    margin:0!important;
}

body.fog-full-width.fog-affiliate-page #masthead .main-navigation ul li {
    margin-top:0!important;
    margin-bottom:0!important;
}

body.fog-full-width.fog-hide-menu-bar .ascendoor-page,
body.fog-full-width.fog-hide-menu-bar .site-content,
body.fog-full-width.fog-hide-menu-bar #content {
    padding-top:0!important;
    margin-top:0!important;
}

body.fog-full-width.fog-hide-menu-bar .fog-page-header {
    margin-top:0!important;
}

/* /onlyfans/ (with or without affiliate UTM/source params) — break the page out of the
   theme's narrow content wrapper so the grid actually fills the screen.
   On affiliate pages the masthead is also hidden, so these wrappers'
   top spacing becomes an empty white band — zero that out too. */
body.fog-full-width .ascendoor-page,
body.fog-full-width .site-content,
body.fog-full-width #content,
body.fog-full-width .site-content > .ascendoor-wrapper,
body.fog-full-width #content > .ascendoor-wrapper {
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
}

body.fog-affiliate-page,
body.fog-full-width.fog-hide-menu-bar {
    padding-top:0!important;
    margin-top:0!important;
}

body.fog-full-width.fog-affiliate-page .ascendoor-page,
body.fog-full-width.fog-affiliate-page .site-content,
body.fog-full-width.fog-affiliate-page #content {
    padding-top:0!important;
    margin-top:0!important;
}

body.fog-full-width.fog-affiliate-page .fog-page-header {
    margin-top:0!important;
}

body.fog-full-width.fog-hide-sticky-button .bob-button-of,
body.fog-full-width.fog-hide-sticky-button .bob-button-of.bob-flex-center,
body.fog-full-width.fog-hide-sticky-button .bob-flex-center.bob-button-of {
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
}

@media(min-width:1280px) {
    body.fog-full-width #fog-grid-wrapper {
        max-width:1440px;
    }
}

@media(min-width:600px) {
    body.fog-full-width.fog-hide-menu-bar .bottom-header-wrapper {
        display:none!important;
    }
}

@media(max-width:991px) {
    body.fog-full-width:not(.fog-affiliate-page) #masthead .mobile-header-top {
        display:none!important;
    }
}

@media(max-width:599px) {
    body.fog-full-width.fog-affiliate-page #masthead .mobile-header-top-wrapper,
    body.fog-full-width.fog-affiliate-page #masthead .mobile-bottom-header-wrapper {
        padding-top:0!important;
        padding-bottom:0!important;
    }

    body.fog-full-width.fog-affiliate-page #masthead .mobile-header-top-wrapper {
        min-height:50px!important;
        height:50px!important;
        max-height:50px!important;
        padding-top:0!important;
        padding-bottom:0!important;
    }

    body.fog-full-width.fog-affiliate-page #masthead .site-title a {
        font-size:12.1px!important;
    }

    body.fog-full-width.fog-affiliate-page #masthead .site-description {
        display:block!important;
        font-size:9px!important;
        line-height:1.1!important;
    }

    body.fog-full-width.fog-affiliate-page #masthead .main-navigation-links .menu > li > a,
    body.fog-full-width.fog-affiliate-page #masthead .main-navigation-links .nav-menu > li > a {
        font-size:11px!important;
    }

    body.fog-full-width.fog-affiliate-page #masthead .free-of-button {
        transform:scale(.58);
    }

    body.fog-full-width.fog-hide-menu-bar .mobile-header-top-wrapper {
        display:none!important;
    }

    .fog-card-meta {
        min-height:84px;
        padding:10px;
    }

    .fog-card-name {
        font-size:16px;
    }

    .fog-card--blog .fog-card-name {
        font-size:15px;
    }

    .fog-card-cta {
        min-height:36px;
        padding:8px;
        font-size:12px;
    }

    .fog-card--free::after {
        top:8px;
        left:8px;
        padding:3px 6px;
        font-size:9px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .fog-card,
    .fog-card-img img,
    .fog-card-cta {
        transition:none;
    }
}

@media(hover:none) {
    .fog-card,
    .fog-card-img img,
    .fog-card-cta,
    .fog-card-img-secondary {
        transition:none;
    }
}

@keyframes fog-spin {
    to {
        transform:rotate(360deg);
    }
}

/* ───── Affiliate "new banner style" (opt-in per affiliate) ─────────────
   The H1 and location pill move into a full-width horizontal banner
   (~92px desktop / 88px mobile). The home-link and OF logo sit just above
   the banner in their own thin strip. Banner / H1 / location colors are
   driven by per-affiliate CSS variables set inline on .fog-page-header. */

body.fog-style-banner.fog-affiliate-page .fog-page-header {
    margin:0;
    padding:0 0 18px;
    /* Brand-red gradient over the dark page background — same vertical
       fade pattern as the light variant, but tuned for visibility on black. */
    background:
        linear-gradient(180deg, rgba(158,17,64,.42), rgba(0,0,0,0) 60%),
        linear-gradient(0deg,   rgba(158,17,64,.42), rgba(0,0,0,0) 60%),
        var(--fog-banner-page-bg, #0a0a0c);
    border-bottom:none;
}

/* Make the home-link readable on black: dark surface + light brand text. */
body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-home-link {
    background:rgba(13,13,16,.85);
    background:color-mix(in srgb, var(--fog-banner-page-bg, #0a0a0c) 85%, transparent);
    color:#fff;
    border-color:rgba(255,255,255,.18);
}

body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-home-title {
    color:#fff;
}

body.fog-style-banner.fog-affiliate-page .fog-header-strip {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:8px 16px;
}

body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-home-link {
    position:relative;
    top:auto;
    left:auto;
    margin:0;
}

body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-header-logo-wrap {
    position:relative;
    top:auto;
    right:auto;
    width:64px;
}

body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-header-logo {
    width:64px;
}

body.fog-style-banner.fog-affiliate-page .fog-banner {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:92px;
    padding:14px 16px;
    background:var(--fog-banner-bg, #facc15);
    color:var(--fog-banner-h1, #1a1a1a);
    text-align:center;
}

body.fog-style-banner.fog-affiliate-page .fog-banner .fog-page-title {
    margin:0;
    color:var(--fog-banner-h1, #1a1a1a);
    font-size:24px;
    line-height:1.05;
}

body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-line {
    margin:0;
    min-height:0;
    font-size:18px;
}

body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-pin {
    font-size:36px;
    line-height:1;
}

body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-badge {
    background:var(--fog-banner-location, #dc2626);
    border-color:rgba(255,255,255,.4);
    color:#fff;
    font-size:18px;
    /* Glowing halo around the pill — color tracks the chosen location color
       via color-mix so it works for whatever palette the affiliate picks. */
    box-shadow:
        0 0 18px color-mix(in srgb, var(--fog-banner-location, #dc2626) 60%, transparent),
        0 0 32px color-mix(in srgb, var(--fog-banner-location, #dc2626) 35%, transparent),
        0 6px 16px rgba(0,0,0,.18);
}

body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-line--pending .fog-location-badge {
    background:rgba(0,0,0,.08);
    box-shadow:none;
}

body.fog-style-banner.fog-affiliate-page .fog-banner .fog-subtext {
    margin:6px 0 0;
    color:var(--fog-banner-h1, #1a1a1a);
    opacity:.8;
}

@media(max-width:599px) {
    body.fog-style-banner.fog-affiliate-page .fog-header-strip {
        padding:6px 10px;
    }

    body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-header-logo-wrap,
    body.fog-style-banner.fog-affiliate-page .fog-header-strip .fog-header-logo {
        width:46px;
    }

    body.fog-style-banner.fog-affiliate-page .fog-banner {
        min-height:88px;
        padding:10px 12px;
        gap:6px;
    }

    body.fog-style-banner.fog-affiliate-page .fog-banner .fog-page-title {
        font-size:18px;
    }

    body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-line {
        font-size:16px;
    }

    body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-pin {
        font-size:28px;
    }

    body.fog-style-banner.fog-affiliate-page .fog-banner .fog-location-badge {
        font-size:16px;
    }
}

/* ───── Banner-style "embedded neon card" effect ────────────────────────
   Activated only on banner-style affiliate pages. Rebuilds the cool
   rotating-ring + blurred backdrop + pulsing-glow look from the reference
   site. Heavy on GPU — that's why it's gated to the opt-in style only. */

/* Defaults — these spans only render when banner_style is on, but defend
   in case stale HTML hits a non-banner page. */
.fog-card-blur-bg,
.fog-card-neon-glow,
.fog-card-border-cutout {
    display:none;
}

body.fog-style-banner.fog-affiliate-page,
body.fog-style-banner.fog-affiliate-page .fog-site-main,
body.fog-style-banner.fog-affiliate-page #primary,
body.fog-style-banner.fog-affiliate-page #page,
body.fog-style-banner.fog-affiliate-page #content,
body.fog-style-banner.fog-affiliate-page .site-content,
body.fog-style-banner.fog-affiliate-page .ascendoor-page,
body.fog-style-banner.fog-affiliate-page .ascendoor-wrapper {
    --fog-page:var(--fog-banner-page-bg, #0a0a0c);
    background:var(--fog-banner-page-bg, #0a0a0c)!important;
    color:#fff;
}

body.fog-style-banner.fog-affiliate-page #fog-grid-wrapper,
body.fog-style-banner.fog-affiliate-page .fog-wrapper,
body.fog-style-banner.fog-affiliate-page .fog-grid {
    background:var(--fog-banner-page-bg, #0a0a0c)!important;
}

body.fog-style-banner.fog-affiliate-page #fog-grid-wrapper.fog-wrapper--banner,
body.fog-style-banner.fog-affiliate-page .fog-wrapper--banner {
    background:var(--fog-banner-page-bg, #0a0a0c)!important;
    box-shadow:0 0 0 100vmax var(--fog-banner-page-bg, #0a0a0c);
    clip-path:inset(0 -100vmax);
}

body.fog-style-banner.fog-affiliate-page .fog-card {
    overflow:hidden;
    isolation:isolate;
    border:none;
    background:var(--fog-banner-page-bg, #0a0a0c)!important;
    color:#fff;
    box-shadow:
        0 0 6px rgba(255,77,166,.34),
        0 0 10px rgba(25,230,237,.18);
}

body.fog-style-banner.fog-affiliate-page .fog-card:hover {
    transform:translateY(-3px);
    border:none;
    color:#fff;
    box-shadow:
        0 0 8px rgba(255,77,166,.46),
        0 0 14px rgba(25,230,237,.24);
}

body.fog-style-banner.fog-affiliate-page .fog-card-blur-bg {
    display:block;
    position:absolute;
    /* Negative inset so the blurred copy spills past the card edge a bit —
       reads as a colored halo instead of just an internal background. */
    inset:-12px;
    z-index:0;
    background-size:cover;
    background-position:center;
    opacity:.38;
    filter:blur(18px) saturate(1.12);
    pointer-events:none;
}

body.fog-style-banner.fog-affiliate-page .fog-card:hover .fog-card-blur-bg {
    opacity:.46;
}

body.fog-style-banner.fog-affiliate-page .fog-card:nth-child(n+9) .fog-card-blur-bg {
    display:none;
}

body.fog-style-banner.fog-affiliate-page .fog-card-neon-glow,
body.fog-style-banner.fog-affiliate-page .fog-card-border-cutout {
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
    border-radius:8px;
    overflow:hidden;
    pointer-events:none;
}

/* Outer halo: same conic-gradient as the ring but blurred → bleeds out
   past the card's edges, gives the card a glowing-from-behind feel. */
body.fog-style-banner.fog-affiliate-page .fog-card-neon-glow {
    filter:blur(12px);
    opacity:.62;
}

body.fog-style-banner.fog-affiliate-page .fog-card-neon-glow::before,
body.fog-style-banner.fog-affiliate-page .fog-card-border-cutout::before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    z-index:-2;
    width:220%;
    height:220%;
    /* Two arcs on opposite sides of the conic gradient — cyan and pink chase
       each other around the card as the whole image rotates. */
    background-image:conic-gradient(
        from 0deg,
        rgba(0,0,0,0) 0deg,
        var(--fog-neon-cyan) 50deg,
        rgba(0,0,0,0) 90deg,
        rgba(0,0,0,0) 180deg,
        var(--fog-neon-pink) 230deg,
        rgba(0,0,0,0) 270deg,
        rgba(0,0,0,0) 360deg
    );
    background-position:0 0;
    background-repeat:no-repeat;
    transform:translate(-50%, -50%) rotate(18deg);
    animation:fog-neon-rotate 5s linear infinite;
}

/* Sharp border ring: the ::before holds the rotating gradient, the ::after
   masks the inside so only a thin glowing edge is visible. */
body.fog-style-banner.fog-affiliate-page .fog-card-border-cutout::after {
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    z-index:-1;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    background:var(--fog-banner-page-bg, #0a0a0c);
    border-radius:5px;
}

/* Lift normal card content above the neon layers. */
body.fog-style-banner.fog-affiliate-page .fog-card > .fog-card-img,
body.fog-style-banner.fog-affiliate-page .fog-card > .fog-card-meta {
    position:relative;
    z-index:2;
}

/* Inset the inner image and meta so the blurred halo can be clearly seen
   bleeding around them — same trick the reference site uses. */
body.fog-style-banner.fog-affiliate-page .fog-card > .fog-card-img {
    margin:14px 14px 0;
    border-radius:8px;
    border-bottom:none;
    background:#1a1a1f;
    background:color-mix(in srgb, var(--fog-banner-page-bg, #0a0a0c) 86%, #fff 14%);
}

body.fog-style-banner.fog-affiliate-page .fog-card-meta {
    margin:0 14px 14px;
    background:rgba(13,13,16,.92)!important;
    background:color-mix(in srgb, var(--fog-banner-page-bg, #0a0a0c) 92%, transparent)!important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-radius:0 0 8px 8px;
    color:#f5f5f5;
}

body.fog-style-banner.fog-affiliate-page .fog-card-name {
    color:#fff;
}

body.fog-style-banner.fog-affiliate-page .fog-card--blog .fog-card-name {
    color:#fff;
}

body.fog-style-banner.fog-affiliate-page .fog-card-meta-line {
    color:#bdbdc4;
}

/* Variant: alternate cards skip the rotating ring (cheaper) and only get
   the blurred halo + pulse — same alternation as the reference layout. */
body.fog-style-banner.fog-affiliate-page .fog-card:nth-child(even) .fog-card-neon-glow,
body.fog-style-banner.fog-affiliate-page .fog-card:nth-child(even) .fog-card-border-cutout {
    display:none;
}

body.fog-style-banner.fog-affiliate-page .fog-card:nth-child(n+13) .fog-card-neon-glow,
body.fog-style-banner.fog-affiliate-page .fog-card:nth-child(n+13) .fog-card-border-cutout {
    display:none;
}

@keyframes fog-neon-rotate {
    to { transform:translate(-50%, -50%) rotate(1turn); }
}

@keyframes fog-card-glow {
    from {
        box-shadow:
            0 0 4px rgba(255,0,255,.55),
            0 0 8px rgba(0,255,255,.45),
            0 0 12px rgba(230,0,115,.45);
    }
    to {
        box-shadow:
            0 0 8px rgba(255,77,166,.55),
            0 0 16px rgba(255,77,166,.45),
            0 0 22px rgba(230,105,255,.45);
    }
}

@media(prefers-reduced-motion:reduce) {
    body.fog-style-banner.fog-affiliate-page .fog-card,
    body.fog-style-banner.fog-affiliate-page .fog-card-neon-glow::before,
    body.fog-style-banner.fog-affiliate-page .fog-card-border-cutout::before {
        animation:none;
    }
}

/* During pinch-to-zoom the browser must re-composite every GPU layer on
   every frame. Blur filters, backdrop-filter, and continuously-rotating
   gradients force many expensive layer invalidations → tiles go black while
   re-rasterizing. Suppress them for the duration of the gesture so the
   browser only has to manage plain image layers during zoom. */
body.fog-pinching .fog-card-blur-bg {
    opacity:0!important;
    filter:none!important;
}
body.fog-pinching .fog-card-neon-glow,
body.fog-pinching .fog-card-border-cutout {
    display:none!important;
}
body.fog-pinching .fog-card-meta {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

/* ── Viewport-managed GPU effects ──────────────────────────────────────────
   Neon ring/glow/blur elements force one GPU compositor layer per card.
   On long infinite-scroll pages the browser evicts off-screen textures and
   they repaint black on scroll-back (same root cause as fog-pinching).
   JS adds .fog-card--fx via IntersectionObserver while a card is within
   ~600 px of the viewport; at most ~12 cards hold live GPU layers at once. */
body.fog-style-banner.fog-affiliate-page .fog-card:not(.fog-card--fx) .fog-card-neon-glow,
body.fog-style-banner.fog-affiliate-page .fog-card:not(.fog-card--fx) .fog-card-border-cutout {
    display:none!important;
}
body.fog-style-banner.fog-affiliate-page .fog-card:not(.fog-card--fx) .fog-card-meta {
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

/* ── Smooth image fade-in ──────────────────────────────────────────────────
   Infinite-scroll images start at opacity:0 (.fog-img--pending); the load
   listener swaps to .fog-img--loaded which transitions to opacity:1.
   Eliminates the grey-placeholder flash while images download on scroll. */
.fog-card-img img.fog-img--pending {
    opacity:0;
}
.fog-card-img img.fog-img--loaded {
    opacity:1;
    transition:opacity .25s ease;
}

/* ── Affiliate page: prevent Google Fonts swap flash in header ─────────────
   The theme loads Playfair Display via Google Fonts (font-display:swap).
   The font-swap causes the H1 to reflow when the webfont arrives, making
   the header appear taller then shrink. Using a locally-available system
   font eliminates the swap entirely — zero layout shift on page load. */
body.fog-affiliate-page .fog-page-title {
    font-family: Georgia, "Times New Roman", serif;
}