/* ============================================================
   homepage.css — StouteFans homepage shortcode [onlyfans_home]
   F2F branded. Plak deze in Customizer → Aanvullende CSS.
   ============================================================ */

:root {
    --ofm-pp-50:   #fafaff;
    --ofm-pp-100:  #f3f2fc;
    --ofm-pp-200:  #d1cdf3;
    --ofm-pp-300:  #afa9e9;
    --ofm-pp-400:  #8f86de;
    --ofm-pp-500:  #6f64d2;
    --ofm-pp-600:  #4f42c6;
    --ofm-pp-700:  #3f35a5;
    --ofm-pp-800:  #332c81;
    --ofm-pp-900:  #26215d;
    --ofm-pp-1000: #19163b;
    --ofm-grad:        linear-gradient(141deg, #322b74 6.99%, #1b1732 104.8%);
    --ofm-grad-bright: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
    --ofm-grad-soft:   linear-gradient(141deg, #6f64d2 0%, #4f42c6 100%);
    --ofm-grad-gold:   linear-gradient(135deg, #ffe600, #ff7b00);

    --ofm-card-radius: 18px;
    --ofm-line: rgba(63, 53, 165, .12);
}

/* F2F mark als data-URL (URL-encoded zodat geen HTML-detectie) */
.f2f-icon {
    display: inline-block;
    width: 1em; height: 1.2em;
    vertical-align: -0.15em;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%233f35a5'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%233f35a5'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}
.f2f-icon.is-white {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%23ffffff'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%23ffffff'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}

/* ============================================================
   HERO
   ============================================================ */
.ofm-hero {
    position: relative !important;
    background: var(--ofm-grad) !important;
    color: #fff !important;
    border-radius: 0 0 32px 32px !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    width: 100% !important;
    display: block !important;
    min-height: 420px !important;
    z-index: 1;
}
.ofm-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(143,134,222,.30), transparent 45%),
        radial-gradient(circle at 90% 100%, rgba(79,66,198,.35), transparent 50%);
    pointer-events: none; z-index: 0;
}
.ofm-hero::after {
    content: ""; position: absolute; right: 24px; bottom: 18px;
    width: 60px; height: 72px; opacity: .08;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%23ffffff'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%23ffffff'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
    z-index: 1;
}
.ofm-hero-inner {
    position: relative !important; z-index: 2 !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 42px 24px 36px !important;
    text-align: center !important;
    background: transparent !important;
}
.ofm-hero-partner {
    display: inline-flex !important; align-items: center; gap: 8px;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    font-size: 12px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 18px !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    width: auto !important;
}
.ofm-hero .ofm-hero-title,
h1.ofm-hero-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: clamp(28px, 4vw, 46px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
    background: transparent !important;
    background-image: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
    width: auto !important;
    text-align: center !important;
    position: static !important;
    overflow: visible !important;
}
.ofm-hero .ofm-hero-title::before,
.ofm-hero .ofm-hero-title::after {
    display: none !important;
}
.ofm-hero-title-accent {
    display: block !important;
    background: linear-gradient(90deg, #d1cdf3, #8f86de) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.ofm-hero-sub {
    margin: 0 auto 26px !important;
    max-width: 580px !important;
    font-size: 16px !important;
    color: rgba(255,255,255,.85) !important;
    line-height: 1.55 !important;
    background: transparent !important;
    padding: 0 !important;
}
.ofm-hero-stats {
    list-style: none; margin: 0 auto; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 720px;
}
.ofm-hero-stats li {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 14px 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.ofm-hero-stat-num {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
}
.ofm-hero-stat-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.70);
}

/* ============================================================
   SPOTLIGHT — premium met blurred bg van de foto
   ============================================================ */
.ofm-spotlight {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 36px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 24px 60px rgba(25,22,59,.30);
}
.ofm-spotlight-bg {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ofm-spotlight-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(40px) saturate(1.2);
    transform: scale(1.15);
    opacity: .8;
}
.ofm-spotlight-bg-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(79,66,198,.45), transparent 50%),
        radial-gradient(circle at 80% 100%, rgba(25,22,59,.7), transparent 60%),
        linear-gradient(135deg, rgba(25,22,59,.85), rgba(50,43,116,.75));
}
.ofm-spotlight-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 0;
    align-items: center;
    min-height: 460px;
}
.ofm-spotlight-media {
    position: relative;
    padding: 28px 0 28px 28px;
    min-height: 460px;
}
.ofm-spotlight-photo {
    position: relative; z-index: 1;
    display: block;
    width: 100%; height: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 30px 60px rgba(0,0,0,.50);
    aspect-ratio: 4 / 5;
}
.ofm-spotlight-tag {
    position: absolute; top: 18px; left: 18px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--ofm-pp-800);
    font-size: 11px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .10em;
    box-shadow: 0 10px 30px rgba(0,0,0,.40);
    backdrop-filter: blur(8px);
}
.ofm-spotlight-tag .f2f-icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%233f35a5'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%233f35a5'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}
.ofm-spotlight-discount {
    position: absolute; bottom: 50px; left: 12px;
    z-index: 3;
    background: #ffdd00;
    color: #1a1306;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(255,165,0,.50);
    transform: rotate(-6deg);
    letter-spacing: -.02em;
}
.ofm-spotlight-body {
    padding: 36px 36px 36px 30px;
    color: #fff;
    display: flex; flex-direction: column;
    gap: 14px;
}
.ofm-spotlight-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 900;
    color: rgba(255,255,255,.85);
    text-transform: uppercase; letter-spacing: .14em;
}
.ofm-spotlight-pulse {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 999px;
    background: #afa9e9;
    box-shadow: 0 0 0 0 rgba(175, 169, 233, .7);
    animation: ofm-pulse 1.8s infinite;
}
@keyframes ofm-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(175, 169, 233, .7); }
    70%  { box-shadow: 0 0 0 10px rgba(175, 169, 233, 0); }
    100% { box-shadow: 0 0 0 0   rgba(175, 169, 233, 0); }
}
.ofm-spotlight-name {
    margin: 4px 0 0 !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: .95 !important;
    letter-spacing: -.025em !important;
    text-shadow: 0 4px 24px rgba(0,0,0,.40);
    background: transparent !important;
    padding: 0 !important;
}
.ofm-spotlight-handle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 15px;
    color: rgba(255,255,255,.75);
    font-weight: 700;
    background: rgba(255,255,255,.10);
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    width: max-content;
    backdrop-filter: blur(8px);
}
.ofm-spotlight-stats {
    list-style: none;
    margin: 12px 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ofm-spotlight-stats li {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    padding: 14px 12px;
    text-align: left;
    backdrop-filter: blur(6px);
}
.ofm-spotlight-stats li svg {
    width: 18px; height: 18px;
    color: rgba(255,255,255,.6);
    margin-bottom: 6px;
    display: block;
}
.ofm-spotlight-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}
.ofm-spotlight-stat-lbl {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}
.ofm-spotlight-price {
    margin-top: 8px;
    display: flex; align-items: baseline; gap: 10px;
    flex-wrap: wrap;
}
.ofm-spotlight-price-label {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .10em;
    margin-right: 4px;
}
.ofm-spotlight-price-old {
    font-size: 18px;
    font-weight: 800;
    color: rgba(255,255,255,.45);
    text-decoration: line-through;
}
.ofm-spotlight-price-new {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}
.ofm-spotlight-actions {
    margin-top: 16px;
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
}
.ofm-btn-spotlight {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 22px;
    border-radius: 14px;
    background: #fff;
    color: var(--ofm-pp-800) !important;
    font-weight: 900;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 18px 40px rgba(0,0,0,.40);
    transition: transform .2s, box-shadow .2s;
    letter-spacing: -.01em;
}
.ofm-btn-spotlight .f2f-icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%233f35a5'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%233f35a5'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}
.ofm-btn-spotlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 24px 50px rgba(0,0,0,.50);
    color: var(--ofm-pp-900) !important;
}
.ofm-btn-text {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    transition: color .2s, border-color .2s;
}
.ofm-btn-text:hover {
    color: #fff !important;
    border-color: #fff;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ofm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    border: none; cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    line-height: 1;
}
.ofm-btn-sm { padding: 9px 14px; font-size: 13px; }
.ofm-btn-primary {
    background: var(--ofm-grad-bright);
    color: #fff;
    box-shadow: 0 8px 20px rgba(63,53,165,.30);
}
.ofm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(63,53,165,.45);
    color: #fff;
}
.ofm-btn-secondary {
    background: #fff;
    color: var(--ofm-pp-800);
    border: 1px solid var(--ofm-pp-200);
}
.ofm-btn-secondary:hover {
    background: var(--ofm-pp-100);
    transform: translateY(-1px);
}
.ofm-btn-icon {
    width: 38px; height: 38px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ofm-pp-200);
    color: var(--ofm-pp-700);
    flex-shrink: 0;
}
.ofm-btn-icon:hover {
    background: var(--ofm-pp-100);
    transform: translateY(-1px);
}

/* ============================================================
   ROOT WRAP + FILTER TOOLBAR
   ============================================================ */
.ofm-grid-wrap {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.ofm-filter-toolbar {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(25,22,59,.08);
    border: 1px solid var(--ofm-line);
    padding: 16px 18px;
    margin-bottom: 22px;
    display: flex; flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.ofm-filter-toolbar-header {
    display: none; align-items: center; justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ofm-line);
}
.ofm-filter-toolbar-title {
    margin: 0;
    font-size: 14px; font-weight: 800;
    color: var(--ofm-pp-800);
}
.ofm-icon-btn {
    width: 32px; height: 32px;
    border-radius: 999px; border: none;
    background: var(--ofm-pp-100);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.ofm-icon-btn span {
    position: absolute; top: 50%; left: 50%;
    width: 14px; height: 2px;
    background: var(--ofm-pp-700);
    border-radius: 999px;
    transform-origin: center;
}
.ofm-icon-btn span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.ofm-icon-btn span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

.ofm-filter-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.ofm-filter-row-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--ofm-pp-800);
    text-transform: uppercase;
    letter-spacing: .08em;
    flex-shrink: 0;
}
.ofm-filter-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
}
.ofm-filter-search-icon {
    position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--ofm-pp-500);
    pointer-events: none;
}
.ofm-filter-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 999px;
    border: 1px solid var(--ofm-pp-200);
    font-size: 14px;
    background: var(--ofm-pp-50);
    color: var(--ofm-pp-1000);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ofm-filter-search-input:focus {
    border-color: var(--ofm-pp-600);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(63,53,165,.18);
}
.ofm-filter-badges,
.ofm-filter-sort {
    display: flex; gap: 6px; flex-wrap: wrap;
    flex: 1 1 auto;
}

.ofm-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--ofm-pp-200);
    background: #fff;
    font-size: 12px; font-weight: 700;
    color: var(--ofm-pp-800);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.ofm-pill svg { color: var(--ofm-pp-700); }
.ofm-pill:hover {
    border-color: var(--ofm-pp-500);
    background: var(--ofm-pp-100);
    transform: translateY(-1px);
}
.ofm-pill.is-active {
    background: var(--ofm-grad-bright);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(63,53,165,.35);
}
.ofm-pill.is-active svg,
.ofm-pill.is-active .f2f-icon { color: #fff; }
.ofm-pill.is-active .f2f-icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%23ffffff'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%23ffffff'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}
.ofm-pill-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ofm-pp-700);
    color: #fff;
    font-size: 10px; font-weight: 800;
}
.ofm-pill.is-active .ofm-pill-count {
    background: rgba(255,255,255,.25);
}

.ofm-filter-result {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--ofm-line);
    gap: 12px;
}
.ofm-filter-result-text { font-size: 13px; color: var(--ofm-pp-800); }
.ofm-filter-result-text strong { color: var(--ofm-pp-700); font-size: 14px; }
.ofm-filter-reset {
    background: transparent; border: none;
    color: var(--ofm-pp-700);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: underline;
}
.ofm-filter-reset:hover {
    background: var(--ofm-pp-100);
    text-decoration: none;
}

/* MOBILE FILTER BUTTON */
.ofm-filter-mobile-button {
    display: none;
    position: fixed; left: 16px; bottom: 16px;
    z-index: 1002;
    align-items: center; gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background: var(--ofm-grad-bright);
    color: #fff;
    font-size: 13px; font-weight: 800;
    box-shadow: 0 12px 28px rgba(25,22,59,.40);
    cursor: pointer;
}
.ofm-filter-mobile-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    font-size: 11px; font-weight: 800;
}
.ofm-filter-overlay {
    position: fixed; inset: 0;
    background: rgba(25,22,59,.55);
    opacity: 0; pointer-events: none;
    z-index: 1000;
    transition: opacity .18s ease-out;
    backdrop-filter: blur(2px);
}

/* ============================================================
   GRID + CATEGORY TITLE
   ============================================================ */
.ofm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.ofm-category-block + .ofm-category-block { margin-top: 36px; }
.ofm-grid-wrap .ofm-category-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--ofm-pp-800) !important;
    margin: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    padding: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.ofm-grid-wrap .ofm-category-title::before {
    content: ""; width: 4px; height: 22px;
    border-radius: 4px;
    background: var(--ofm-grad-bright);
    display: inline-block;
}

/* ============================================================
   CARD
   ============================================================ */
.ofm-card {
    position: relative;
    background: #fff;
    border-radius: var(--ofm-card-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid var(--ofm-line);
    box-shadow: 0 6px 18px rgba(25,22,59,.06);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ofm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(25,22,59,.18);
    border-color: var(--ofm-pp-300);
}
.ofm-card[data-prio="2"] { border-color: var(--ofm-pp-500); }
.ofm-card[data-prio="2"]:hover {
    box-shadow: 0 0 0 2px var(--ofm-pp-500), 0 18px 36px rgba(25,22,59,.30);
}
.ofm-card[data-prio="1"] { border-color: var(--ofm-pp-300); }

.ofm-card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--ofm-pp-100);
    overflow: hidden;
}
.ofm-card-media-link {
    position: absolute; inset: 0; display: block;
}
.ofm-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.ofm-card:hover .ofm-card-media img {
    transform: scale(1.04);
}

.ofm-card-fav {
    position: absolute; top: 10px; right: 10px;
    z-index: 4;
    width: 34px; height: 34px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.92);
    color: var(--ofm-pp-700);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(25,22,59,.20);
    backdrop-filter: blur(4px);
    transition: transform .15s, background .15s;
}
.ofm-card-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ofm-card-fav:hover { transform: scale(1.08); }
.ofm-card-fav[aria-pressed="true"] {
    background: var(--ofm-grad-bright);
    color: #fff;
}
.ofm-card-fav[aria-pressed="true"] svg { fill: #fff; stroke: #fff; }

.ofm-card-tier {
    position: absolute; top: 12px; left: 12px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    box-shadow: 0 4px 14px rgba(25,22,59,.30);
}
.ofm-card-tier-ambassador { background: var(--ofm-grad-gold); color: #1a1306; }
.ofm-card-tier-exclusive  { background: var(--ofm-grad-bright); }

.ofm-card-discount {
    position: absolute; bottom: 60px; left: 12px;
    z-index: 3;
    background: #ffdd00;
    color: #1a1306;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(255,165,0,.40);
    transform: rotate(-4deg);
}

.ofm-card-overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 22px 12px 10px;
    display: flex; gap: 10px; flex-wrap: wrap;
    background: linear-gradient(180deg, transparent 0%, rgba(25,22,59,.82) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.ofm-card-stat {
    display: inline-flex; align-items: center; gap: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ofm-card-stat svg { width: 13px; height: 13px; flex-shrink: 0; }

.ofm-card-body {
    padding: 14px 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}
.ofm-card-name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--ofm-pp-900);
    line-height: 1.2;
    letter-spacing: -.01em;
}
.ofm-card-handle {
    margin: 0;
    font-size: 13px;
    color: var(--ofm-pp-500);
    font-weight: 600;
}
.ofm-card-price {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 2px;
}
.ofm-card-price-old {
    text-decoration: line-through;
    color: var(--ofm-pp-400);
    font-size: 14px;
    font-weight: 700;
}
.ofm-card-price-new {
    font-size: 18px;
    font-weight: 900;
    color: var(--ofm-pp-700);
}
.ofm-card-actions {
    margin-top: auto;
    display: flex; gap: 6px;
}
.ofm-card-actions .ofm-btn-primary { flex: 1; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.ofm-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px dashed var(--ofm-pp-300);
    border-radius: 18px;
    color: var(--ofm-pp-800);
}
.ofm-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--ofm-pp-300);
}
.ofm-empty-state h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--ofm-pp-800);
}
.ofm-empty-state p {
    margin: 0 auto 18px;
    font-size: 14px;
    color: var(--ofm-pp-700);
    max-width: 380px;
}

/* ============================================================
   PARTNER CTA
   ============================================================ */
.ofm-partner-cta {
    max-width: 1100px;
    margin: 40px auto;
    background: var(--ofm-grad);
    color: #fff;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.ofm-partner-cta::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 0% 50%, rgba(143,134,222,.30), transparent 50%),
        radial-gradient(circle at 100% 50%, rgba(79,66,198,.30), transparent 50%);
    pointer-events: none;
}
.ofm-partner-cta-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 36px 32px;
    align-items: center;
}
.ofm-partner-cta-logo {
    font-size: 72px;
    line-height: 1;
    opacity: .85;
}
.ofm-partner-cta h2 {
    margin: 0 0 10px !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
}
.ofm-partner-cta p {
    margin: 0 0 16px;
    color: rgba(255,255,255,.85);
    font-size: 15px;
    line-height: 1.6;
    max-width: 620px;
}
.ofm-partner-cta-points {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.ofm-partner-cta-points li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.ofm-partner-cta-points svg {
    width: 14px; height: 14px;
    color: #afa9e9;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .ofm-spotlight-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ofm-spotlight-media {
        padding: 22px 22px 0 22px;
        min-height: auto;
    }
    .ofm-spotlight-photo {
        max-height: 380px;
        aspect-ratio: 16 / 10;
    }
    .ofm-spotlight-body { padding: 24px 22px 28px; }
    .ofm-spotlight-stats { grid-template-columns: repeat(3, 1fr); }
    .ofm-partner-cta-inner { grid-template-columns: 1fr; gap: 14px; text-align: center; }
    .ofm-partner-cta-logo { font-size: 56px; }
    .ofm-partner-cta-points { justify-content: center; }
}
@media (max-width: 768px) {
    .ofm-hero-inner { padding: 30px 18px 26px !important; }
    .ofm-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .ofm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .ofm-card-name { font-size: 15px; }

    .ofm-filter-toolbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        margin: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        transition: transform .22s ease-out;
        z-index: 1001;
        max-height: 85vh;
        overflow-y: auto;
        padding-bottom: 24px;
    }
    .ofm-filter-toolbar-header { display: flex; }
    .ofm-filter-mobile-button { display: inline-flex; }
    [data-ofm-root].ofm-filters-open .ofm-filter-toolbar { transform: translateY(0); }
    [data-ofm-root].ofm-filters-open .ofm-filter-overlay { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ofm-card, .ofm-card-media img, .ofm-btn, .ofm-pill,
    .ofm-filter-toolbar, .ofm-filter-overlay, .ofm-card-fav,
    .ofm-spotlight-pulse { transition: none !important; animation: none !important; }
}

/* ============================================================
   extracss.css — F2F-branded global stylesheet
   Officiële F2F.com palette  |  Primary: #3f35a5
   Gradient: linear-gradient(141deg, #322b74 6.99%, #1b1732 104.8%)
   ============================================================ */

/* ============================================================
   0) DESIGN TOKENS
   ============================================================ */
:root {
    /* F2F official palette */
    --f2f-purple-100: #f3f2fc;
    --f2f-purple-200: #d1cdf3;
    --f2f-purple-300: #afa9e9;
    --f2f-purple-400: #8f86de;
    --f2f-purple-500: #6f64d2;
    --f2f-purple-600: #4f42c6;
    --f2f-purple-700: #3f35a5;
    --f2f-purple-800: #332c81;
    --f2f-purple-900: #26215d;
    --f2f-purple-1000: #19163b;

    --f2f-gradient: linear-gradient(141deg, #322b74 6.99%, #1b1732 104.8%);
    --f2f-gradient-bright: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
    --f2f-gradient-soft: linear-gradient(141deg, #6f64d2 0%, #4f42c6 100%);

    /* Backwards-compat: oude --ofx-* en --brand-* vars wijzen nu naar F2F paars
       zodat oude selectors meteen mee herkleuren. */
    --ofx-red:  var(--f2f-purple-700);
    --ofx-pink: var(--f2f-purple-500);
    --brand-red:     var(--f2f-purple-700);
    --brand-pink:    var(--f2f-purple-500);
    --brand-bg:      #ffffff;
    --brand-text:    #2a2548;
    --brand-subtext: #555a78;
    --brand-shadow:  rgba(25, 22, 59, .12);
    --brand-radius:  12px;

    /* F2F mark als data-URL (officiële path, URL-encoded zodat geen HTML-detectie) */
    --f2f-mark-white: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%23ffffff'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%23ffffff'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
    --f2f-mark-purple: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%233f35a5'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%233f35a5'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}

/* Inline F2F icon utility */
.f2f-icon {
    display: inline-block;
    width: 1em; height: 1.2em;
    background: var(--f2f-mark-purple) no-repeat center / contain;
    vertical-align: -0.15em;
}
.f2f-icon.is-white { background-image: var(--f2f-mark-white); }

/* ============================================================
   1) MODEL GRID (categorie archief + algemene grids)
   ============================================================ */
body.tax-model_category .ofm-model-grid[data-ofm-grid] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
body.tax-model_category .ofm-model-grid[data-ofm-grid] > * {
    width: 100%; max-width: 100%; margin: 0; box-sizing: border-box;
}
.tax-model_category .ofm-container { max-width: 80%; }

.ofm-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.ofm-thumb-fixed {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    background: var(--f2f-purple-100);
    margin-bottom: 10px;
}
.ofm-thumb-fixed img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.ofm-model-item.ofx-model-block {
    display: flex; flex-direction: column;
    justify-content: flex-start; text-align: center;
}
.ofm-model-buttons {
    margin-top: auto;
    display: flex; gap: 10px;
    justify-content: center;
}

/* ============================================================
   2) ENTRY CONTENT WRAPPER
   ============================================================ */
.entry-content-wrap { padding: 2rem 0 0 0; }
article .entry-content-wrap { padding: 1.5rem; }

/* ============================================================
   3) OFX MODEL BLOCK (kleine kaart)
   ============================================================ */
.ofx-model-block {
    background: #fff;
    border-radius: var(--brand-radius);
    box-shadow: 0 4px 12px var(--brand-shadow);
    padding: 16px;
    max-width: 320px;
    font-family: "Arial", sans-serif;
    text-align: center;
    margin: 20px 0;
    border: 1px solid var(--f2f-purple-100);
}
@media (max-width: 768px) {
    .ofx-model-block { margin: 20px auto; }
}

.ofx-model-figure { margin-bottom: 10px; }
.ofx-model-img {
    width: 100%; border-radius: 8px; object-fit: cover;
}

.ofx-model-title {
    margin: 0 0 8px;
    font-size: 20px; font-weight: 700;
    color: var(--f2f-purple-700);
}

.ofx-model-price {
    margin-bottom: 12px; font-size: 15px;
}
.ofx-old-price {
    text-decoration: line-through;
    color: #9296b8; margin-right: 5px;
}
.ofx-new-price {
    color: var(--f2f-purple-700);
    font-weight: 700;
}

.ofx-model-stats {
    display: flex; justify-content: center;
    gap: 10px; margin: 12px 0 16px;
    flex-wrap: wrap;
}
.ofx-stat {
    background: var(--f2f-gradient-bright);
    color: #fff;
    padding: 4px 8px; border-radius: 15px;
    display: flex; align-items: center; gap: 4px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(63, 53, 165, .25);
}
.ofx-icon {
    width: 12px; height: 12px;
    fill: currentColor; flex-shrink: 0;
}
.ofx-stat-number { font-weight: 700; }
.ofx-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

.ofx-model-buttons { margin-top: 8px; }
.ofx-button {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--f2f-gradient-bright);
    color: #fff;
    padding: 8px 16px; border-radius: 20px;
    text-decoration: none;
    font-weight: 600; font-size: 14px;
    box-shadow: 0 3px 10px rgba(63, 53, 165, .25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ofx-button::before {
    content: ""; width: 12px; height: 14px;
    background: var(--f2f-mark-white) no-repeat center / contain;
    flex-shrink: 0;
}
.ofx-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(63, 53, 165, .40);
}

.ofx-no-model {
    background: var(--f2f-purple-100);
    color: var(--f2f-purple-800);
    padding: 10px; border-radius: 6px;
    text-align: center;
    margin: 20px auto; max-width: 320px;
    font-size: 14px;
    border: 1px solid var(--f2f-purple-200);
}

/* ============================================================
   4) MODEL CARD (.single-model .ofm-model-info)
   ============================================================ */
.single-model .ofm-model-info {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 20px;
    margin: 0 auto; max-width: 720px;
    position: relative; z-index: 1;
}

.ofm-model-name {
    font-size: 28px; font-weight: 800;
    color: var(--f2f-purple-700);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(25,22,59,.06);
}
.ofm-model-handle {
    font-size: 15px;
    color: var(--f2f-purple-500);
    margin-bottom: 10px;
}

/* ============================================================
   5) SINGLE MODEL STATS (badges)
   ============================================================ */
.single-model-stats {
    display: flex; justify-content: center; align-items: center;
    gap: 16px; flex-wrap: wrap;
    margin: 16px 0 24px;
}
.model-stat {
    display: flex; align-items: center; gap: 6px;
    background: var(--f2f-gradient-bright);
    padding: 6px 12px; border-radius: 30px;
    color: #fff;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 4px 10px rgba(63, 53, 165, .25);
    transition: transform 0.2s ease;
}
.model-stat:hover { transform: translateY(-2px); }
.model-stat svg,
.model-stat .dashicons {
    width: 16px; height: 16px;
    font-size: 16px; line-height: 16px;
    fill: #fff; flex-shrink: 0;
}
.model-stat-number {
    font-size: 14px; font-weight: 700;
    margin: 0 2px;
}
.model-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.9; letter-spacing: 0.5px;
}

/* Variant binnen categorie-archief */
.tax-model_category .model-stat {
    gap: 3px; padding: 6px 8px;
    font-size: 12px;
}

/* ============================================================
   6) PRICE + CTA
   ============================================================ */
.ofm-model-price {
    font-size: 16px; margin-bottom: 16px;
}
.ofm-old-price {
    text-decoration: line-through;
    color: #b0b3cc; margin-right: 8px;
}
.ofm-new-price {
    color: var(--f2f-purple-700);
    font-size: 18px; font-weight: bold;
}
.ofm-single-price {
    color: var(--brand-text);
    font-size: 20px; font-weight: bold;
}

.ofm-model-button {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    background: var(--f2f-gradient-bright);
    color: #fff !important;
    border-radius: 30px;
    font-weight: bold; font-size: 15px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(63, 53, 165, .35);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.ofm-model-button::before {
    content: ""; width: 14px; height: 17px;
    background: var(--f2f-mark-white) no-repeat center / contain;
    flex-shrink: 0;
}
.ofm-model-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(63, 53, 165, .45);
}

/* ============================================================
   7) SIDEBAR DRAWER (single-model)
   ============================================================ */
@media screen and (min-width: 769px) {
    .single-model .sidebar-inner-wrap {
        position: fixed !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        z-index: 999 !important;
        width: 100%; max-width: 320px;
        opacity: 0; pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .single-model .sidebar-inner-wrap.visible {
        opacity: 1; pointer-events: auto;
    }
}
@media screen and (max-width: 768px) {
    .single-model .sidebar-inner-wrap {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .ofx-superblock .ofx-inner { width: 100%; }
}

body.single-model .ofm-sidebar-drawer {
    position: fixed; top: 0; right: -280px;
    width: 280px; height: 100%;
    background: #fff; overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 5;
}
body.single-model .ofm-sidebar-drawer.open { right: 0; }

button.ofm-sidebar-close {
    background: transparent; border: none;
    font-size: 1.8rem; line-height: 1;
    color: #fff; cursor: pointer;
}

body.single-model .ofm-sidebar-toggle {
    position: fixed; right: 0; top: 40%;
    width: 40px; padding: 8px 0;
    background: var(--f2f-gradient-bright);
    color: #fff;
    border-radius: 8px 0 0 8px;
    border: none; cursor: pointer;
    animation: bounce-cta 1.4s infinite ease-in-out;
    z-index: 9999;
    box-shadow: -4px 4px 12px rgba(25,22,59,.30);
}
@keyframes bounce-cta {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* ============================================================
   8) SIDEBAR MODEL CARD ([ofm_model_sidebar])
   ============================================================ */
#secondary {
    position: sticky; top: 20%;
    align-self: flex-start;
    z-index: 10;
}
.sidebar-inner-wrap { overflow: visible !important; }

.ofm-sidebar-model {
    background: var(--brand-bg);
    border-radius: 16px;
    padding: 24px 20px; margin-bottom: 30px;
    text-align: center;
    font-family: "Arial", sans-serif;
    color: var(--brand-text);
    position: relative; overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 14px 30px rgba(63, 53, 165, .15);
    border: 1px solid var(--f2f-purple-100);
}
.ofm-sidebar-model::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--f2f-gradient);
}
.ofm-sidebar-model:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(63, 53, 165, .20);
}

.ofm-sidebar-figure { margin: 0 0 20px; }
.ofm-sidebar-img {
    width: 60%; height: auto;
    display: block; margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(25,22,59,.12);
    object-fit: cover;
    transition: transform 0.3s ease;
}
.ofm-sidebar-model:hover .ofm-sidebar-img { transform: scale(1.02); }

.ofm-sidebar-price {
    font-size: 18px; font-weight: 600;
    margin-bottom: 18px;
    color: var(--brand-text);
}
.ofm-sidebar-price .ofm-old-price {
    text-decoration: line-through;
    color: #b0b3cc; margin-right: 8px;
}
.ofm-sidebar-price .ofm-new-price {
    color: var(--f2f-purple-700);
    font-size: 20px; font-weight: bold;
}

.ofm-sidebar-stats {
    display: flex; justify-content: space-between;
    background: var(--f2f-purple-100);
    border-radius: 10px;
    padding: 12px 15px; margin-bottom: 22px;
    font-size: 14px; font-weight: 500;
    color: var(--f2f-purple-800);
    box-shadow: inset 0 2px 4px rgba(25,22,59,.04);
    list-style: none;
}
.ofm-sidebar-stats li {
    flex: 1; text-align: center;
    border-right: 1px solid var(--f2f-purple-200);
    padding: 0 8px;
}
.ofm-sidebar-stats li:last-child { border-right: none; }

.ofm-sidebar-buttons {
    display: flex; flex-direction: column;
    gap: 12px; align-items: center;
    margin-top: 10px;
}

.ofm-sidebar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--f2f-gradient-bright);
    color: #fff !important;
    padding: 14px 26px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(63, 53, 165, .40);
    font-size: 15px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.15);
    min-width: 200px;
    transition: all 0.3s ease-in-out;
}
.ofm-sidebar-btn::before {
    content: ""; width: 14px; height: 17px;
    background: var(--f2f-mark-white) no-repeat center / contain;
    flex-shrink: 0;
}
.ofm-sidebar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(63, 53, 165, .55);
    background: var(--f2f-gradient);
}

/* ============================================================
   9) BODY + GLOBAL CONTAINER
   ============================================================ */
body {
    margin: 0; padding: 0;
    font-family: "Arial", sans-serif;
    background: #fafaff;
    color: var(--brand-text);
    min-height: 100vh;
    position: relative;
}
body::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; height: 300px;
    z-index: -1;
    background: var(--f2f-gradient);
}
body::after {
    content: ""; position: absolute;
    bottom: 0; left: 0; right: 0; height: 200px;
    z-index: -1;
    background: var(--f2f-gradient);
}

.ofm-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background: var(--brand-bg);
    border-radius: var(--brand-radius);
    box-shadow: 0 4px 12px var(--brand-shadow);
    position: relative; z-index: 1;
}

.card {
    background: var(--brand-bg);
    border-radius: var(--brand-radius);
    box-shadow: 0 2px 8px var(--brand-shadow);
    overflow: hidden;
}

/* Generieke knoppen */
.ofm-button,
.ofm-model-button {
    background: var(--f2f-gradient-bright);
    color: #fff;
}

/* ============================================================
  10) SINGLE MODEL DETAIL
   ============================================================ */
.ofm-model-card {
    background: var(--brand-bg);
    padding: 20px 20px 0 20px;
}

.ofm-model-meta {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
}
.ofm-model-icons {
    display: flex; align-items: center; gap: 15px;
}
.ofm-icon {
    display: flex; align-items: center; gap: 5px;
    font-size: 16px; font-weight: bold;
    color: var(--brand-text);
}
.ofm-icon svg {
    width: 18px; height: 18px;
    fill: var(--f2f-purple-700);
}

.ofm-model-header {
    display: flex; align-items: flex-start; gap: 20px;
}
.ofm-model-image img {
    width: 250px;
    border-radius: var(--brand-radius);
    box-shadow: 0 2px 8px rgba(25,22,59,.18);
}
.ofm-model-info { flex: 1; }
.ofm-short-desc {
    font-size: 16px; line-height: 1.6;
    color: var(--brand-subtext);
    margin-bottom: 15px;
}

.ofm-editor-content {
    margin-top: 20px;
    background: #fff; padding: 20px;
    border-radius: var(--brand-radius);
    box-shadow: 0 2px 8px var(--brand-shadow);
}
.ofm-editor-content p {
    margin-bottom: 1em; line-height: 1.6;
    color: var(--brand-text);
}

section.ofx-trio-band { top: -50px; }
.ofx-trio-band { margin: 60px 0 20px; }

/* ============================================================
  11) GERELATEERDE MODELLEN
   ============================================================ */
.ofm-related-models {
    margin-top: 30px; padding: 20px;
    background: var(--brand-bg);
    border-radius: var(--brand-radius);
    box-shadow: 0 2px 8px var(--brand-shadow);
}
.ofm-related-models h2 {
    font-size: 22px;
    color: var(--f2f-purple-700);
    margin: 0 0 20px;
    display: flex; align-items: center; gap: 10px;
}
.ofm-related-models h2::before {
    content: ""; width: 18px; height: 22px;
    background: var(--f2f-mark-purple) no-repeat center / contain;
}

.ofm-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    justify-items: center;
}

.ofm-related-item {
    width: 100%; max-width: 250px;
    background: #fff;
    border-radius: var(--brand-radius);
    box-shadow: 0 1px 6px var(--brand-shadow);
    transition: transform .3s, box-shadow .3s;
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--f2f-purple-100);
}
.ofm-related-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(63, 53, 165, .18);
    border-color: var(--f2f-purple-200);
}
.ofm-related-thumb img {
    width: 100%; height: 180px; object-fit: cover;
}
.ofm-related-content {
    flex: 1; padding: 15px;
    display: flex; flex-direction: column;
}
.ofm-related-title {
    font-size: 18px; font-weight: bold;
    color: var(--f2f-purple-700);
    margin: 0 0 8px;
}
.ofm-related-price {
    font-size: 16px; font-weight: bold;
    color: var(--brand-text);
}
.ofm-no-related {
    text-align: center; font-size: 16px;
    color: var(--brand-subtext);
    padding: 10px;
}

/* ============================================================
  12) CATEGORIE-ARCHIEF
   ============================================================ */
.ofm-category-archive { margin-bottom: 30px; }

.ofm-category-header {
    text-align: center; margin-bottom: 30px; color: #fff;
}
.ofm-category-title {
    font-size: 36px; margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.ofm-category-description p {
    margin: 10px auto;
    line-height: 1.6; max-width: 600px;
    color: #fff;
}

.ofm-model-item {
    background: #fff;
    border-radius: var(--brand-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--brand-shadow);
    display: flex; flex-direction: column;
    transition: transform .3s, box-shadow .3s;
    border: 1px solid var(--f2f-purple-100);
}
.ofm-model-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(63, 53, 165, .18);
    border-color: var(--f2f-purple-200);
}

.ofm-model-thumb {
    width: 100%; height: 250px;
    display: flex; align-items: center; justify-content: center;
    background: var(--f2f-purple-100);
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
}
.ofm-model-thumb img {
    max-height: 100%; max-width: 100%;
    height: auto; width: auto;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 768px) {
    .ofm-model-thumb { height: auto; }
    .ofm-model-thumb img {
        width: 100%; height: auto;
        object-fit: contain;
    }
}

.no-thumbnail {
    background: var(--f2f-purple-100);
    color: var(--f2f-purple-800);
    font-size: 14px; padding: 30px;
    text-align: center; width: 100%;
    box-sizing: border-box;
}

.ofm-model-content {
    padding: 15px; flex: 1;
    display: flex; flex-direction: column; gap: 10px;
}

.ofm-model-title {
    font-size: 20px; margin: 0;
    line-height: 1.2;
    color: var(--f2f-purple-700);
}
.ofm-model-title a {
    text-decoration: none;
    color: var(--f2f-purple-700);
}
.ofm-model-title a:hover { text-decoration: underline; }
.ofm-model-handle {
    font-size: 16px;
    color: var(--f2f-purple-500);
    margin: 0;
}
.ofm-model-meta {
    font-size: 14px;
    color: var(--brand-subtext);
}
.ofm-model-button-wrap { margin-top: auto; }

/* Paginatie */
.ofm-pagination {
    margin-top: 30px;
    display: flex; justify-content: center;
}
.ofm-pagination .page-numbers {
    display: inline-block;
    margin: 0 5px; padding: 8px 12px;
    background: var(--f2f-purple-100);
    color: var(--f2f-purple-800);
    border-radius: var(--brand-radius);
    text-decoration: none;
    transition: background .3s, color .3s;
}
.ofm-pagination .page-numbers.current {
    background: var(--f2f-purple-700);
    color: #fff;
}
.ofm-pagination .page-numbers:hover {
    background: var(--f2f-purple-200);
    color: var(--f2f-purple-900);
}

.ofm-category-seo-text {
    margin: 30px auto;
    background: #fff;
    padding: 20px;
    border-radius: var(--brand-radius);
    max-width: 900px;
    box-shadow: 0 2px 8px var(--brand-shadow);
}
.ofm-category-seo-text p {
    margin-bottom: 1em;
    color: var(--brand-text);
}

/* ============================================================
  13) BANNER (entry-hero) + USP BAR
   ============================================================ */
.entry-hero-container-inner {
    background: var(--f2f-gradient) !important;
    position: relative;
    display: flex; justify-content: center; align-items: center;
    text-align: center;
    min-height: 250px;
    overflow: hidden;
}
.entry-hero-container-inner::before {
    content: "";
    position: absolute; right: 24px; bottom: 16px;
    width: 60px; height: 72px;
    background: var(--f2f-mark-white) no-repeat center / contain;
    opacity: 0.18;
    pointer-events: none;
}
.hero-section-overlay {
    background: rgba(25, 22, 59, 0.45) !important;
}

.entry-header.page-title {
    display: flex; justify-content: center; align-items: center;
    text-align: center;
    padding: 35px 10px;
}

h1.entry-title,
.post-home-title {
    background: var(--f2f-gradient-bright);
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(63, 53, 165, .40);
    position: relative; overflow: hidden;
    width: auto;
    font-size: 24px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    transition: all .3s ease-in-out;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
    text-align: center;
    line-height: 1.3;
}
h1.entry-title::before {
    content: "";
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, transparent 70%);
    opacity: 0.15;
    transition: opacity .3s ease-in-out;
}
h1.entry-title:hover::before { opacity: 0.3; }
h1.entry-title:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(63, 53, 165, .55);
}

@media (max-width: 1024px) {
    h1.entry-title { width: 100%; font-size: 22px; padding: 14px 28px; }
}
@media (max-width: 768px) {
    h1.entry-title { width: 100%; font-size: 20px; padding: 12px 24px; }
}

/* USP bar */
.ofm-usp-bar.flush {
    margin-top: 0 !important;
    width: 100%;
    background: var(--f2f-gradient-bright);
    display: flex; justify-content: center; align-items: center;
    gap: 20px;
    padding: 15px 0;
    box-sizing: border-box;
    margin-bottom: 40px;
}
.ofm-usp-bar .usp-item {
    background: #fff;
    color: var(--f2f-purple-700);
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(25,22,59,.10);
    flex: 0 1 auto;
    text-align: center;
    display: inline-flex; align-items: center; gap: 8px;
}
.ofm-usp-bar .usp-item::before {
    content: ""; width: 12px; height: 14px;
    background: var(--f2f-mark-purple) no-repeat center / contain;
    flex-shrink: 0;
}

/* ============================================================
  14) CATEGORIES WRAP
   ============================================================ */
.ofm-categories-wrap {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
}
.ofm-category-section { margin-bottom: 50px; }
.ofm-category-title {
    font-size: 26px;
    color: var(--f2f-purple-700);
    margin-bottom: 20px;
    text-align: center;
}

.ofm-model-item h3 {
    font-size: 18px;
    color: var(--f2f-purple-700);
    margin-bottom: 10px;
}

/* Single-color knop variant binnen grid */
.ofm-model-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--f2f-purple-700);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background .3s;
}
.ofm-model-btn::before {
    content: ""; width: 12px; height: 14px;
    background: var(--f2f-mark-white) no-repeat center / contain;
    flex-shrink: 0;
}
.ofm-model-btn:hover {
    background: var(--f2f-purple-600);
    color: white;
}

a.ofm-model-button { color: white !important; }

.ofm-onlyfans-icon {
    width: 20px; height: 20px;
    vertical-align: middle;
    fill: currentColor;
}

.ofm-no-cat,
.ofm-no-models {
    text-align: center;
    color: var(--brand-subtext);
    margin-bottom: 20px;
}

/* ============================================================
  15) HERO LOGO
   ============================================================ */
.hero-logo {
    max-width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3));
}

/* ============================================================
  16) FOOTER
   ============================================================ */
.site-footer {
    background: var(--f2f-gradient);
    color: #fff;
    padding: 50px 0;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute; right: 30px; top: 30px;
    width: 50px; height: 60px;
    background: var(--f2f-mark-white) no-repeat center / contain;
    opacity: 0.10;
    pointer-events: none;
}
.site-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .3s;
}
.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer-wrap {
    max-width: 1200px; margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: space-between;
}
.site-middle-footer-inner-wrap {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.site-footer-section {
    flex: 1; min-width: 220px;
}
.site-footer h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
}
.site-footer ul {
    list-style: none;
    padding: 0; margin: 0;
}
.site-footer ul li { margin-bottom: 8px; }

.site-bottom-footer-wrap {
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    padding: 20px 0;
    font-size: 14px;
    width: 100%;
}
.site-bottom-footer-inner-wrap {
    padding: 10px 0;
    display: flex; justify-content: center; align-items: center;
    width: 100%;
}

@media (max-width: 1024px) {
    .site-footer-wrap {
        flex-direction: column;
        text-align: center;
    }
    .site-middle-footer-inner-wrap {
        flex-direction: column; align-items: center;
    }
    .site-footer-section {
        text-align: center;
        max-width: 400px;
        margin: 0 auto 20px;
    }
    .site-bottom-footer-wrap {
        font-size: 12px;
        padding: 15px 0;
    }
}

/* ============================================================
  17) SHORT DESC + BLURRED + POPUP
   ============================================================ */
.ofm-short-desc {
    background: var(--f2f-gradient-bright);
    color: #fff;
    font-size: 16px; font-weight: bold;
    text-align: center;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(63, 53, 165, .35);
    display: inline-block;
    width: 100%; max-width: 600px;
    margin: 20px auto;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.5;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.ofm-short-desc:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(63, 53, 165, .55);
}

.blurred-text {
    filter: blur(5px);
    color: rgba(255, 255, 255, 0.7);
    transition: filter .3s, color .3s;
    display: inline-block;
    margin-left: 6px;
}

body.popup-active {
    overflow: hidden;
    height: 100vh;
}

.ofm-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(25, 22, 59, 0.92);
    justify-content: center; align-items: center;
    overflow: hidden;
    backdrop-filter: blur(4px);
}
.ofm-popup-content {
    position: relative;
    background: #fff;
    padding: 28px 24px 24px;
    width: 90%; max-width: 500px;
    border-radius: 12px;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 26px 80px rgba(25,22,59,.50);
}
.ofm-popup-content::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--f2f-gradient);
    border-radius: 12px 12px 0 0;
}
.ofm-popup-content h2 {
    margin-top: 0;
    color: var(--f2f-purple-700);
    display: inline-flex; align-items: center; gap: 10px;
}
.ofm-popup-content h2::before {
    content: ""; width: 18px; height: 22px;
    background: var(--f2f-mark-purple) no-repeat center / contain;
}

.ofm-close {
    position: absolute; top: 10px; right: 15px;
    font-size: 28px; font-weight: bold;
    cursor: pointer;
    color: var(--f2f-purple-700);
    transition: color .2s;
}
.ofm-close:hover { color: var(--f2f-purple-500); }

/* "Bekijk model" knop binnen popup */
.ofm-popup .ofm-model-btn {
    background: var(--f2f-gradient-bright);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    display: inline-flex; align-items: center;
    text-decoration: none;
    font-size: 18px; font-weight: bold;
    transition: all .3s ease-in-out;
    margin-top: 16px;
}
.ofm-popup .ofm-model-btn svg { margin-right: 8px; fill: #fff; }
.ofm-popup .ofm-model-btn:hover {
    background: var(--f2f-gradient);
    transform: translateY(-1px);
}

section.ofm-editor-content.ofm-container { z-index: 0; }

/* ============================================================
  18) RELATED DESC (geblurde tekst)
   ============================================================ */
.ofm-related-desc {
    font-size: 16px;
    color: var(--brand-text);
    display: block;
    width: 100%; max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ofm-related-desc:hover .blurred-text {
    filter: blur(0);
    color: var(--brand-text);
    font-weight: bold;
}
.ofm-related-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
.ofm-related-link a { display: inline; }
.ofm-related-link:hover .blurred-text {
    filter: blur(0);
    color: var(--brand-text);
    font-weight: bold;
}

/* ============================================================
  19) RESPONSIVENESS
   ============================================================ */
@media (max-width: 768px) {
    .ofm-model-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ofm-model-image img { width: 200px; }
    .ofm-related-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .ofm-related-thumb img { height: 130px; }
    .ofm-model-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    .ofm-container {
        max-width: 95%;
        margin: 20px auto;
        padding: 15px;
    }
    .ofm-usp-bar.flush { flex-wrap: wrap; padding: 15px 10px; }
    .ofm-usp-bar .usp-item { margin-bottom: 10px; flex: 1; }
    .ofm-categories-wrap { padding: 0; }
}

@media (max-width: 480px) {
    .ofm-related-grid,
    .ofm-model-grid {
        grid-template-columns: 1fr !important;
    }
    .ofm-related-thumb img,
    .ofm-model-thumb img { height: 160px; }
}

/* ============================================================
  20) REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ofx-button, .ofm-model-button, .ofm-sidebar-btn,
    .ofm-model-btn, .ofm-related-item, .ofm-model-item,
    .ofm-sidebar-model, .ofm-sidebar-img, .model-stat,
    .ofm-short-desc, h1.entry-title,
    body.single-model .ofm-sidebar-toggle {
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================
  21) MOBILE POLISH + ALIGNMENT FIXES
   Overrides voor mobile spacing, alignment, en stack order.
   ============================================================ */

/* ----- HERO ----- */
@media (max-width: 768px) {
    .ofm-hero {
        min-height: 360px !important;
        border-radius: 0 0 24px 24px !important;
    }
    .ofm-hero-inner {
        padding: 28px 18px 24px !important;
    }
    .ofm-hero-partner {
        font-size: 11px !important;
        padding: 5px 12px !important;
        margin-bottom: 14px !important;
    }
    .ofm-hero .ofm-hero-title,
    h1.ofm-hero-title {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.08 !important;
        margin-bottom: 10px !important;
    }
    .ofm-hero-sub {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }
    .ofm-hero::after {
        width: 36px; height: 44px;
        right: 14px; bottom: 12px;
    }
}

@media (max-width: 480px) {
    .ofm-hero { min-height: 320px !important; }
    .ofm-hero-stats { gap: 8px; }
    .ofm-hero-stats li { padding: 10px 6px; }
    .ofm-hero-stat-num { font-size: 18px; }
    .ofm-hero-stat-lbl { font-size: 10px; }
}

/* ----- SPOTLIGHT ----- */
@media (max-width: 768px) {
    .ofm-spotlight {
        margin: 0 12px 24px !important;
        border-radius: 18px !important;
    }
    .ofm-spotlight-media {
        padding: 18px 18px 0 18px !important;
    }
    .ofm-spotlight-photo {
        max-height: 320px !important;
        aspect-ratio: 4 / 5 !important;
    }
    .ofm-spotlight-tag {
        top: 14px !important;
        left: 14px !important;
        padding: 7px 11px !important;
        font-size: 10px !important;
    }
    .ofm-spotlight-discount {
        bottom: 30px !important;
        left: 8px !important;
        padding: 6px 11px !important;
        font-size: 15px !important;
    }
    .ofm-spotlight-body {
        padding: 22px 18px 24px !important;
        gap: 10px !important;
    }
    .ofm-spotlight-name {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1 !important;
    }
    .ofm-spotlight-stats {
        gap: 8px !important;
    }
    .ofm-spotlight-stats li {
        padding: 10px 8px !important;
    }
    .ofm-spotlight-stat-val { font-size: 18px !important; }
    .ofm-spotlight-stat-lbl { font-size: 10px !important; }
    .ofm-spotlight-actions {
        gap: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .ofm-btn-spotlight {
        width: 100%;
        justify-content: center;
        padding: 14px 18px !important;
        font-size: 14px !important;
    }
    .ofm-btn-text {
        text-align: center;
        padding: 6px 4px !important;
    }
}

/* ----- GRID + CARDS ----- */
@media (max-width: 768px) {
    .ofm-grid-wrap {
        padding: 0 12px !important;
    }
    .ofm-grid {
        gap: 12px !important;
    }
    .ofm-card-name {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
    .ofm-card-handle {
        font-size: 12px !important;
    }
    .ofm-card-body {
        padding: 12px 12px 14px !important;
        gap: 6px !important;
    }
    .ofm-card-price-new { font-size: 16px !important; }
    .ofm-card-price-old { font-size: 13px !important; }
    .ofm-card-tier {
        font-size: 9px !important;
        padding: 4px 8px !important;
        top: 8px !important;
        left: 8px !important;
    }
    .ofm-card-discount {
        font-size: 11px !important;
        padding: 4px 8px !important;
        left: 8px !important;
        bottom: 50px !important;
    }
    .ofm-card-fav {
        width: 30px !important;
        height: 30px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .ofm-card-fav svg { width: 15px !important; height: 15px !important; }
    .ofm-card-overlay {
        padding: 18px 10px 8px !important;
        gap: 8px !important;
        font-size: 11px !important;
    }
    .ofm-card-stat svg {
        width: 11px !important; height: 11px !important;
    }
    .ofm-card-actions {
        gap: 4px !important;
    }
    .ofm-card-actions .ofm-btn-primary {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    .ofm-card-actions .ofm-btn-icon {
        width: 34px !important;
        height: 34px !important;
    }
}

@media (max-width: 380px) {
    /* Op heel kleine schermen: stack de twee actie-knoppen onder elkaar */
    .ofm-card-actions { flex-direction: column; }
    .ofm-card-actions .ofm-btn-icon {
        width: 100% !important;
        height: auto !important;
        padding: 8px !important;
    }
}

/* ----- FILTER TOOLBAR (mobile bottom sheet) ----- */
@media (max-width: 768px) {
    .ofm-filter-toolbar {
        padding: 18px 16px 20px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .ofm-filter-row {
        gap: 8px !important;
    }
    .ofm-filter-row-label {
        font-size: 11px !important;
    }
    .ofm-pill {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    .ofm-filter-result {
        padding-top: 6px !important;
    }
    .ofm-filter-mobile-button {
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        padding: 11px 15px !important;
        font-size: 12px !important;
    }
}

/* ----- CATEGORY TITLE ----- */
@media (max-width: 768px) {
    .ofm-grid-wrap .ofm-category-title {
        font-size: 18px !important;
        gap: 8px !important;
    }
    .ofm-grid-wrap .ofm-category-title::before {
        height: 18px !important;
    }
    .ofm-category-block + .ofm-category-block {
        margin-top: 24px !important;
    }
}

/* ----- PARTNER CTA ----- */
@media (max-width: 768px) {
    .ofm-partner-cta {
        margin: 28px 12px !important;
        border-radius: 18px !important;
    }
    .ofm-partner-cta-inner {
        padding: 26px 22px !important;
        gap: 16px !important;
    }
    .ofm-partner-cta h2 {
        font-size: 22px !important;
    }
    .ofm-partner-cta p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
    .ofm-partner-cta-points li {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}

/* ----- SPOTLIGHT pulse niet roze meer ----- */
.ofm-spotlight-pulse {
    background: #afa9e9 !important;
    box-shadow: 0 0 0 0 rgba(175, 169, 233, .7) !important;
}

/* ----- ALIGNMENT GLOBAL FIXES ----- */
.ofm-card-actions { align-items: center; }
.ofm-card-body { justify-content: flex-start; }

/* Voorkom horizontal scroll op mobile door overflow */
@media (max-width: 768px) {
    .ofm-hero,
    .ofm-spotlight,
    .ofm-partner-cta {
        overflow-x: clip;
    }
}

/* ============================================================
  22) FAVORITES KNOP — duidelijker hartje
   ============================================================ */
.ofm-card-fav {
    display: flex !important;
    width: 38px !important;
    height: 38px !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow:
        0 0 0 1px rgba(63, 53, 165, .15),
        0 6px 16px rgba(25, 22, 59, .25) !important;
    color: var(--f2f-700) !important;
    transition: transform .15s, background .15s, box-shadow .15s !important;
}
.ofm-card-fav svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--f2f-700) !important;
    fill-opacity: .15;
    stroke: var(--f2f-700) !important;
    stroke-width: 2.4 !important;
    stroke-linejoin: round !important;
}
.ofm-card-fav:hover {
    transform: scale(1.10) !important;
    background: #fff !important;
    box-shadow:
        0 0 0 2px rgba(63, 53, 165, .30),
        0 10px 24px rgba(63, 53, 165, .30) !important;
}
.ofm-card-fav:hover svg {
    fill-opacity: .35;
}
.ofm-card-fav[aria-pressed="true"] {
    background: var(--f2f-grad-bright) !important;
    color: #fff !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .4),
        0 10px 24px rgba(63, 53, 165, .50) !important;
}
.ofm-card-fav[aria-pressed="true"] svg {
    fill: #fff !important;
    fill-opacity: 1 !important;
    stroke: #fff !important;
}

/* Tooltip op hover */
.ofm-card-fav::after {
    content: "Bewaar";
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 4px 8px;
    background: var(--f2f-900);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.ofm-card-fav[aria-pressed="true"]::after { content: "Bewaard"; }
.ofm-card-fav:hover::after,
.ofm-card-fav:focus-visible::after {
    opacity: 1;
}
@media (hover: none) {
    .ofm-card-fav::after { display: none; }
}


/* ============================================================
  23) HERO CENTERING — sterk geforceerd
   Kadence's parent containers proberen soms te overschrijven.
   ============================================================ */
.ofm-hero {
    text-align: center !important;
    display: block !important;
}
.ofm-hero-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
}
.ofm-hero-partner {
    margin-left: auto !important;
    margin-right: auto !important;
}
.ofm-hero h1,
.ofm-hero .ofm-hero-title,
h1.ofm-hero-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}
.ofm-hero-sub {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
.ofm-hero-stats {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
    justify-items: center;
}

/* Centreren binnen Kadence content-wraps die misschien left-align forceren */
.entry-content > .ofm-hero,
.entry-content-wrap > .ofm-hero,
.site-main > .ofm-hero {
    margin-left: auto !important;
    margin-right: auto !important;
}



/* ============================================================
   FIX 3: Favorieten hartje zichtbaarder maken
   ============================================================ */
.ofm-card-fav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    top: 10px !important;
    right: 10px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
    cursor: pointer !important;
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .15s ease !important;
    padding: 0 !important;
}
.ofm-card-fav svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: #19163b !important;
    stroke-width: 2.2 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    transition: fill .15s ease, stroke .15s ease;
}
.ofm-card-fav:hover {
    transform: scale(1.10) !important;
    background: #fff !important;
}
.ofm-card-fav:hover svg {
    fill: var(--f2f-700) !important;
    stroke: var(--f2f-700) !important;
}
.ofm-card-fav[aria-pressed="true"] {
    background: #fff !important;
}
.ofm-card-fav[aria-pressed="true"] svg {
    fill: var(--f2f-700) !important;
    stroke: var(--f2f-700) !important;
}
.ofm-card-fav:focus-visible {
    outline: 2px solid var(--f2f-500) !important;
    outline-offset: 2px !important;
}


/* ============================================================
   FIX: Spotlight alignment + balance
   ============================================================ */

/* Center body verticaal (was top-aligned met lege ruimte onderaan) */
.ofm-spotlight-body {
    justify-content: center !important;
    gap: 16px !important;
}

/* Stats: betere spacing, betere balans */
.ofm-spotlight-stats {
    margin-top: 6px !important;
    gap: 12px !important;
}
.ofm-spotlight-stats li {
    padding: 16px 14px !important;
    text-align: center !important;
}
.ofm-spotlight-stats li svg {
    margin: 0 auto 8px !important;
    width: 20px !important;
    height: 20px !important;
}
.ofm-spotlight-stat-val {
    font-size: 24px !important;
    text-align: center;
}
.ofm-spotlight-stat-lbl {
    font-size: 11px !important;
    text-align: center;
    margin-top: 4px !important;
}

/* Price label + bedrag betere alignment */
.ofm-spotlight-price {
    align-items: center !important;
    margin-top: 4px !important;
}
.ofm-spotlight-price-label {
    margin-right: 8px !important;
    align-self: center;
}

/* Actions: button + tekstlink netjes uitgelijnd */
.ofm-spotlight-actions {
    align-items: center !important;
    gap: 20px !important;
    margin-top: 18px !important;
}

/* Name iets prominenter + lock spacing */
.ofm-spotlight-name {
    margin: 6px 0 4px !important;
}

/* Handle pill iets meer ademruimte */
.ofm-spotlight-handle {
    margin-top: 4px !important;
}

/* Photo media: foto vult mooi op desktop */
@media (min-width: 981px) {
    .ofm-spotlight-media {
        padding: 32px 0 32px 32px !important;
    }
    .ofm-spotlight-photo {
        max-height: none !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }
}


/* ============================================================
   SINGLE MODEL v4 — F2F branded, SEO-rich
   ============================================================ */

.ofm-sm-wrap {
    max-width: 1180px;
    margin: 24px auto 60px;
    padding: 0 20px;
}

/* ===== Breadcrumb ===== */
.ofm-sm-crumbs {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    font-size: 13px;
    color: #555a78;
}
.ofm-sm-crumbs a {
    color: var(--f2f-purple-700, #3f35a5);
    text-decoration: none;
    font-weight: 600;
}
.ofm-sm-crumbs a:hover { text-decoration: underline; }
.ofm-sm-crumbs [aria-current="page"] {
    color: #2a2548;
    font-weight: 700;
}

/* ===== Card wrap ===== */
.ofm-sm-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(25, 22, 59, .12);
    overflow: hidden;
    border: 1px solid rgba(63, 53, 165, .08);
}
.ofm-sm-card.ofm-sm-rank-ambassador {
    box-shadow:
        0 0 0 2px rgba(255, 140, 0, .35),
        0 22px 70px rgba(25, 22, 59, .20);
}
.ofm-sm-card.ofm-sm-rank-exclusive {
    box-shadow:
        0 0 0 2px rgba(79, 66, 198, .45),
        0 22px 70px rgba(25, 22, 59, .20);
}

/* ===== Hero ===== */
.ofm-sm-hero {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    background: #19163b;
    color: #fff;
}
.ofm-sm-hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.ofm-sm-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05);
}
.ofm-sm-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(circle at 15% 10%, rgba(63, 53, 165, .35) 0, transparent 35%),
        radial-gradient(circle at 85% 90%, rgba(50, 43, 116, .40) 0, transparent 40%),
        linear-gradient(180deg, rgba(25, 22, 59, .35) 0%, rgba(25, 22, 59, .85) 100%);
}
.ofm-sm-hero-top {
    position: absolute; top: 18px; left: 18px; right: 18px;
    z-index: 3;
    display: flex; justify-content: space-between;
    gap: 12px;
}
.ofm-sm-tier {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px; font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em;
    color: #fff;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.ofm-sm-tier-ambassador {
    background: linear-gradient(135deg, #ffe600, #ff7b00);
    color: #1a1306;
}
.ofm-sm-tier-exclusive {
    background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
}
.ofm-sm-discount {
    padding: 7px 14px;
    background: #ffdd00;
    color: #1a1306;
    border-radius: 999px;
    font-size: 15px; font-weight: 900;
    box-shadow: 0 8px 24px rgba(255, 165, 0, .40);
    transform: rotate(-4deg);
    align-self: flex-start;
}

.ofm-sm-hero-content {
    position: relative; z-index: 2;
    padding: 32px 24px 28px;
    display: flex; align-items: flex-end;
    gap: 22px;
    min-height: 360px;
}
.ofm-sm-avatar-link {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}
.ofm-sm-avatar {
    margin: 0;
    width: 130px; height: 130px;
    border-radius: 999px;
    overflow: hidden;
    background: #f2f2f2;
    border: 4px solid rgba(255, 255, 255, .95);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
}
.ofm-sm-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ofm-sm-title-block { min-width: 0; flex: 1; }
.ofm-sm-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .50);
}
.ofm-sm-handle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    font-size: 14px; font-weight: 700;
    color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    margin-bottom: 12px;
}
.ofm-sm-stats-inline {
    list-style: none;
    margin: 8px 0 0; padding: 0;
    display: flex; gap: 14px;
    flex-wrap: wrap;
}
.ofm-sm-stats-inline li {
    display: inline-flex; align-items: baseline; gap: 5px;
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
}
.ofm-sm-stats-inline strong {
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.01em;
}

/* ===== Layout grid ===== */
.ofm-sm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    padding: 32px 30px 30px;
    align-items: start;
}
@media (max-width: 920px) {
    .ofm-sm-layout {
        grid-template-columns: 1fr;
        padding: 24px 18px 20px;
    }
}

.ofm-sm-main {
    display: flex; flex-direction: column;
    gap: 28px;
    min-width: 0;
}
.ofm-sm-aside {
    display: flex; flex-direction: column;
    gap: 18px;
    position: sticky; top: 100px;
}
@media (max-width: 920px) {
    .ofm-sm-aside { position: static; }
}

/* ===== Section ===== */
.ofm-sm-section {
    padding: 0;
}
.ofm-sm-h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #1f1a3d !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.ofm-sm-h2::before {
    content: "";
    display: inline-block;
    width: 4px; height: 22px;
    border-radius: 4px;
    background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
}
.ofm-sm-h2-sub {
    margin: -6px 0 16px;
    color: #555a78;
    font-size: 14px;
    line-height: 1.55;
}

/* ===== Rank pill info ===== */
.ofm-sm-rank-info {
    display: flex; gap: 12px;
    padding: 14px 16px;
    background: #f3f2fc;
    border: 1px solid rgba(63, 53, 165, .15);
    border-radius: 14px;
    color: #332c81;
}
.ofm-sm-rank-info strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 900;
}
.ofm-sm-rank-info p {
    margin: 0;
    font-size: 14px;
    color: #555a78;
    line-height: 1.5;
}
.ofm-sm-rank-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 999px;
    background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}

/* ===== Stats grid ===== */
.ofm-sm-stats-grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.ofm-sm-stats-grid li {
    padding: 14px 16px;
    background: #fafaff;
    border: 1px solid rgba(63, 53, 165, .10);
    border-radius: 12px;
}
.ofm-sm-stats-grid strong {
    display: block;
    color: #3f35a5;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
}
.ofm-sm-stats-grid span {
    display: block;
    margin-top: 4px;
    color: #555a78;
    font-size: 13px;
    font-weight: 600;
}

/* ===== Intro block ===== */
.ofm-sm-intro {
    margin-top: 20px;
    padding: 16px 18px;
    background: #fafaff;
    border-left: 3px solid #3f35a5;
    border-radius: 8px;
}
.ofm-sm-intro p {
    margin: 0 0 10px;
    color: #2a2548;
    font-size: 15px;
    line-height: 1.7;
}
.ofm-sm-more-btn {
    appearance: none;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #d1cdf3;
    border-radius: 999px;
    color: #3f35a5;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ofm-sm-more-btn:hover {
    background: #f3f2fc;
    border-color: #4f42c6;
}

/* ===== Stories rail ===== */
.ofm-sm-stories {}
.ofm-sm-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: #d1cdf3 transparent;
}
.ofm-sm-rail::-webkit-scrollbar { height: 6px; }
.ofm-sm-rail::-webkit-scrollbar-thumb { background: #d1cdf3; border-radius: 999px; }
.ofm-sm-rail-item {
    flex: 0 0 auto;
    position: relative;
    width: 110px; height: 138px;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: #19163b;
    box-shadow: 0 6px 18px rgba(25, 22, 59, .18);
    transition: transform .15s, box-shadow .15s;
}
.ofm-sm-rail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(63, 53, 165, .35);
}
.ofm-sm-rail-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ofm-sm-rail-lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(25, 22, 59, .25), rgba(25, 22, 59, .85));
    color: #fff;
}

/* ===== Prose (about/why) ===== */
.ofm-sm-prose {
    color: #2a2548;
    font-size: 15px;
    line-height: 1.7;
}
.ofm-sm-prose p { margin: 0 0 1em; }
.ofm-sm-prose p:last-child { margin: 0; }
.ofm-sm-prose a {
    color: #3f35a5;
    text-decoration: underline;
    font-weight: 600;
}

/* ===== FAQ ===== */
.ofm-sm-faq-list {
    display: flex; flex-direction: column;
    gap: 8px;
}
.ofm-sm-faq-item {
    background: #fafaff;
    border: 1px solid rgba(63, 53, 165, .10);
    border-radius: 12px;
    overflow: hidden;
}
.ofm-sm-faq-item summary {
    padding: 14px 18px;
    cursor: pointer;
    color: #332c81;
    font-size: 15px;
    font-weight: 700;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.ofm-sm-faq-item summary::-webkit-details-marker { display: none; }
.ofm-sm-faq-item summary::after {
    content: "+";
    margin-left: 12px;
    color: #6f64d2;
    font-size: 20px; font-weight: 900;
    transition: transform .15s;
}
.ofm-sm-faq-item[open] summary::after { transform: rotate(45deg); }
.ofm-sm-faq-item > div {
    padding: 0 18px 16px;
    color: #2a2548;
    font-size: 14.5px;
    line-height: 1.65;
}

/* ===== Price card (sidebar) ===== */
.ofm-sm-price-card {
    padding: 22px 20px;
    background: linear-gradient(141deg, #322b74 6.99%, #1b1732 104.8%);
    border-radius: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(25, 22, 59, .25);
}
.ofm-sm-price-card::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 0%, rgba(143, 134, 222, .25), transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(79, 66, 198, .28), transparent 55%);
}
.ofm-sm-price-card > * { position: relative; z-index: 1; }
.ofm-sm-price-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .65);
    font-size: 11px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .10em;
}
.ofm-sm-price-row {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.ofm-sm-price-old {
    color: rgba(255, 255, 255, .45);
    font-size: 18px; font-weight: 700;
    text-decoration: line-through;
}
.ofm-sm-price-new {
    color: #fff;
    font-size: 32px; font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
}
.ofm-sm-price-pct {
    padding: 4px 8px;
    background: #ffdd00;
    color: #1a1306;
    border-radius: 6px;
    font-size: 13px; font-weight: 900;
}
.ofm-sm-discount-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .80);
    font-size: 13px;
    line-height: 1.45;
}
.ofm-sm-cta {
    margin-top: 16px;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: #fff;
    color: #332c81 !important;
    border-radius: 14px;
    font-weight: 900;
    font-size: 15px;
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .4),
        0 16px 32px rgba(0, 0, 0, .35);
    transition: transform .15s, box-shadow .15s;
}
.ofm-sm-cta:hover {
    transform: translateY(-1px);
    color: #19163b !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .6),
        0 20px 40px rgba(0, 0, 0, .45);
}
.ofm-sm-cta .f2f-icon {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2036'%3E%3Cpath%20fill='%233f35a5'%20d='M6.75%2011.25V6.75H22.5V2C22.4984%201.47005%2022.2872%200.962265%2021.9125%200.587535C21.5377%200.212805%2021.0299%200.00158273%2020.5%200L2%200C1.47005%200.00158273%200.962265%200.212805%200.587535%200.587535C0.212805%200.962265%200.00158273%201.47005%200%202L0%2027.25C0.00158273%2027.7799%200.212805%2028.2877%200.587535%2028.6625C0.962265%2029.0372%201.47005%2029.2484%202%2029.25H6.75V15.75H18V11.25H6.75Z'/%3E%3Cpath%20fill='%233f35a5'%20d='M22.5%2024.75V29.25H6.75V34C6.75158%2034.5299%206.9628%2035.0377%207.33753%2035.4125C7.71226%2035.7872%208.22005%2035.9984%208.75%2036H27.25C27.7799%2035.9984%2028.2877%2035.7872%2028.6625%2035.4125C29.0372%2035.0377%2029.2484%2034.5299%2029.25%2034V8.75C29.2484%208.22005%2029.0372%207.71226%2028.6625%207.33753C28.2877%206.9628%2027.7799%206.75158%2027.25%206.75H22.5V20.25H11.25V24.75H22.5Z'/%3E%3C/svg%3E");
}

/* ===== Trust card ===== */
.ofm-sm-trust {
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(63, 53, 165, .12);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(25, 22, 59, .06);
}
.ofm-sm-trust-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #332c81 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important; align-items: center; gap: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ofm-sm-trust-title svg { color: #6f64d2; }
.ofm-sm-trust-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 8px;
}
.ofm-sm-trust-list li {
    display: flex; align-items: center; gap: 8px;
    color: #2a2548;
    font-size: 14px;
    font-weight: 600;
}
.ofm-sm-trust-list svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    color: #6f64d2;
}

/* ===== Socials ===== */
.ofm-sm-socials {
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(63, 53, 165, .12);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(25, 22, 59, .06);
}
.ofm-sm-socials-list {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.ofm-sm-socials-list a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: #f3f2fc;
    color: #3f35a5;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s, transform .15s, color .15s;
}
.ofm-sm-socials-list a:hover {
    background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
    color: #fff;
    transform: translateY(-2px);
}
.ofm-sm-socials-list svg { width: 18px; height: 18px; }

/* ===== Content section ===== */
.ofm-sm-content {
    max-width: 1180px;
    margin: 0 auto 40px;
    padding: 0 20px;
}
.ofm-sm-content-inner {
    padding: 30px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(25, 22, 59, .06);
    color: #2a2548;
    line-height: 1.75;
}
.ofm-sm-content-inner h2,
.ofm-sm-content-inner h3 {
    color: #332c81;
    background: transparent !important;
    padding: 0 !important;
}

/* ===== Popup ===== */
.ofm-sm-popup {
    position: fixed; inset: 0;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(25, 22, 59, .85);
    backdrop-filter: blur(6px);
}
.ofm-sm-popup-card {
    position: relative;
    max-width: 600px; width: 100%;
    max-height: 85vh;
    padding: 30px 26px 24px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    overflow-y: auto;
}
.ofm-sm-popup-close {
    position: absolute;
    top: 12px; right: 14px;
    width: 36px; height: 36px;
    border: none;
    border-radius: 10px;
    background: #f3f2fc;
    color: #3f35a5;
    font-size: 22px; font-weight: 900;
    cursor: pointer;
    transition: background .15s;
}
.ofm-sm-popup-close:hover { background: #d1cdf3; }
.ofm-sm-popup-card h2 {
    margin: 0 0 14px !important;
    color: #332c81 !important;
    font-size: 22px !important;
    background: transparent !important;
    padding: 0 !important;
}
.ofm-sm-popup-body {
    color: #2a2548;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* ===== Sticky mobile CTA ===== */
.ofm-sm-sticky-cta {
    display: none;
}
@media (max-width: 768px) {
    .ofm-sm-sticky-cta {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 9998;
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -8px 24px rgba(25, 22, 59, .18);
        border-top: 1px solid rgba(63, 53, 165, .12);
    }
    body { padding-bottom: 80px; }
}
.ofm-sm-sticky-price {
    display: flex; align-items: baseline; gap: 6px;
    flex: 1; min-width: 0;
}
.ofm-sm-sticky-old {
    color: #9296b8;
    font-size: 13px;
    text-decoration: line-through;
}
.ofm-sm-sticky-price strong {
    color: #19163b;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.01em;
}
.ofm-sm-sticky-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
    color: #fff !important;
    text-decoration: none;
    border-radius: 12px;
    font-size: 14px; font-weight: 800;
    box-shadow: 0 8px 20px rgba(63, 53, 165, .35);
}

/* ===== Mobile adjustments ===== */
@media (max-width: 768px) {
    .ofm-sm-wrap { padding: 0 12px; margin: 16px auto 30px; }
    .ofm-sm-card { border-radius: 18px; }
    .ofm-sm-hero { min-height: 280px; }
    .ofm-sm-hero-content {
        padding: 22px 18px 20px;
        min-height: 280px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .ofm-sm-avatar { width: 90px; height: 90px; }
    .ofm-sm-title { font-size: clamp(22px, 6vw, 30px) !important; }
    .ofm-sm-stats-inline { gap: 10px; }
    .ofm-sm-stats-inline li { font-size: 13px; }
    .ofm-sm-stats-inline strong { font-size: 15px; }

    .ofm-sm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ofm-sm-stats-grid strong { font-size: 20px; }
    .ofm-sm-rail-item { width: 90px; height: 114px; }
}


/* ============================================================
   FIX: Story rail items zijn nu links, hover toont overlay CTA
   ============================================================ */

/* Rail item is nu een <a> i.p.v. <button> */
a.ofm-sm-rail-item {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Overlay komt over de hele thumb */
.ofm-sm-rail-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(25, 22, 59, .25) 0%, rgba(25, 22, 59, .90) 100%);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
/* Default: locked thumbs altijd half-zichtbare overlay */
.ofm-sm-rail-item[data-locked="1"] .ofm-sm-rail-overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(25, 22, 59, .15) 0%, rgba(25, 22, 59, .82) 100%);
}
/* Op hover: volledig zichtbaar voor zowel locked als open */
.ofm-sm-rail-item:hover .ofm-sm-rail-overlay,
.ofm-sm-rail-item:focus-visible .ofm-sm-rail-overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(63, 53, 165, .55) 0%, rgba(25, 22, 59, .92) 100%);
}

.ofm-sm-rail-overlay-inner {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    color: #fff;
    text-align: center;
    padding: 0 8px;
}
.ofm-sm-rail-cta {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

/* "Bekijk alle content" link onder de rail */
.ofm-sm-rail-all {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 10px 16px;
    background: var(--f2f-purple-100, #f3f2fc);
    color: var(--f2f-purple-700, #3f35a5) !important;
    border: 1px solid var(--f2f-purple-200, #d1cdf3);
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, transform .15s, border-color .15s;
}
.ofm-sm-rail-all:hover {
    background: var(--f2f-purple-200, #d1cdf3);
    border-color: var(--f2f-purple-500, #6f64d2);
    transform: translateY(-1px);
}
.ofm-sm-rail-all svg {
    flex-shrink: 0;
}

/* Op mobile: kleinere CTA tekst in overlay */
@media (max-width: 768px) {
    .ofm-sm-rail-cta { font-size: 10px; }
    .ofm-sm-rail-overlay-inner svg { width: 18px; height: 18px; }
}

/* ===========================================================
   28) Discovery section — "Ontdek meer modellen" (single-model)
   =========================================================== */
.ofm-disc {
  position: relative;
  margin: 56px auto 80px;
  max-width: 1200px;
  padding: 48px 40px 56px;
  color: #fff;
  background: linear-gradient(141deg, #19163b 0%, #322b74 100%);
  border-radius: 28px;
  border: 1px solid rgba(111,100,210,.25);
  box-shadow: 0 24px 80px rgba(25,22,59,.45);
  overflow: hidden;
}
.ofm-disc::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(111,100,210,.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ofm-disc &gt; * { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .ofm-disc { padding: 32px 18px 40px; border-radius: 20px; }
}

/* HEAD: title-block left, category link right */
.ofm-disc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.ofm-disc-head &gt; div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ofm-disc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(141deg, rgba(79,66,198,.45), rgba(50,43,116,.45));
  border: 1px solid rgba(111,100,210,.7);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ofm-disc-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f64d2;
  box-shadow: 0 0 0 0 rgba(111,100,210,.7);
  animation: ofmDiscPulse 1.8s infinite;
}
@keyframes ofmDiscPulse {
  0%   { box-shadow: 0 0 0 0 rgba(111,100,210,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(111,100,210,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,100,210,0); }
}
.ofm-disc-h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 900;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}
.ofm-disc-h2-pre {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  color: #8b80e8;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.ofm-disc-h2-name {
  color: #fff;
  background: linear-gradient(141deg, #fff 0%, #cfc8ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.ofm-disc-h2-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6f64d2 0%, transparent 100%);
}
.ofm-disc-sub {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  margin: 12px 0 0;
  max-width: 640px;
  line-height: 1.55;
}
.ofm-disc-sub strong {
  color: #a8a0ff;
  font-weight: 700;
  text-transform: capitalize;
}
.ofm-disc-cat {
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: 10px;
  background: rgba(111,100,210,.28);
  border: 1px solid rgba(111,100,210,.6);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.ofm-disc-cat:hover {
  background: rgba(111,100,210,.25);
  color: #fff;
  border-color: rgba(111,100,210,.6);
}

/* FEATURED CARD */
.ofm-disc-featured {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  background: linear-gradient(141deg, #322b74 6.99%, #1b1732 104.8%);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(111,100,210,.3);
  box-shadow: 0 24px 60px rgba(25,22,59,.5);
  margin-bottom: 48px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.ofm-disc-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 80px rgba(79,66,198,.45);
}
.ofm-disc-feat-img {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  text-decoration: none;
}
.ofm-disc-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ofm-disc-featured:hover .ofm-disc-feat-img img { transform: scale(1.05); }
.ofm-disc-feat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(25,22,59,.7) 100%);
  pointer-events: none;
}
.ofm-disc-feat-tier {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 16px rgba(79,66,198,.45);
}
.ofm-disc-feat-pct {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  border: 1px solid rgba(111,100,210,.6);
}
.ofm-disc-feat-body {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.ofm-disc-feat-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6f64d2;
  display: inline-block;
  padding: 4px 0;
}
.ofm-disc-feat-name {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  color: #fff;
}

/* Match reasons (ul/li with SVG) */
.ofm-disc-feat-match {
  list-style: none;
  padding: 0;
  margin: 4px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ofm-disc-feat-match li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(111,100,210,.3);
  border: 1px solid rgba(111,100,210,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ofm-disc-feat-match li svg {
  width: 14px;
  height: 14px;
  color: #a8a0ff;
  flex-shrink: 0;
}

/* Stats list (ul/li with strong) */
.ofm-disc-feat-stats {
  list-style: none;
  padding: 14px 0;
  margin: 6px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ofm-disc-feat-stats li {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
}
.ofm-disc-feat-stats strong {
  font-size: 17px;
  font-weight: 900;
  color: #fff;
}

.ofm-disc-feat-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ofm-disc-feat-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ofm-disc-feat-old {
  font-size: 14px;
  color: rgba(255,255,255,.4);
  text-decoration: line-through;
}
.ofm-disc-feat-new {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.ofm-disc-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(79,66,198,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ofm-disc-feat-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(79,66,198,.55);
  color: #fff;
}
.ofm-disc-feat-cta svg { flex-shrink: 0; }

/* SECTION H3 */
.ofm-disc-section-h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 18px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ofm-disc-section-h3::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #6f64d2, transparent);
  border-radius: 2px;
}

/* SIMILAR GRID */
.ofm-disc-similar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}
.ofm-disc-sim {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(141deg, rgba(50,43,116,.4) 0%, rgba(27,23,50,.6) 100%);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(111,100,210,.2);
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ofm-disc-sim:hover {
  transform: translateY(-4px);
  border-color: rgba(111,100,210,.6);
  box-shadow: 0 18px 40px rgba(79,66,198,.35);
}
.ofm-disc-sim-img {
  position: relative;
  aspect-ratio: 1/1.15;
  overflow: hidden;
}
.ofm-disc-sim-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ofm-disc-sim:hover .ofm-disc-sim-img img { transform: scale(1.08); }
.ofm-disc-sim-tier {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(141deg, #4f42c6 6.99%, #322b74 104.8%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 12px rgba(79,66,198,.35);
}
.ofm-disc-sim-pct {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 900;
  color: #fff;
}
.ofm-disc-sim-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ofm-disc-sim-name {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ofm-disc-sim-match {
  font-size: 11px;
  color: #a8a0ff;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ofm-disc-sim-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ofm-disc-sim-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}
.ofm-disc-sim-stat svg {
  width: 12px;
  height: 12px;
  color: #a8a0ff;
  flex-shrink: 0;
}
.ofm-disc-sim-price {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

/* RAIL */
.ofm-disc-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 16px;
  margin-bottom: 36px;
  scrollbar-width: thin;
  scrollbar-color: rgba(111,100,210,.4) transparent;
}
.ofm-disc-rail::-webkit-scrollbar { height: 6px; }
.ofm-disc-rail::-webkit-scrollbar-track { background: transparent; }
.ofm-disc-rail::-webkit-scrollbar-thumb { background: rgba(111,100,210,.4); border-radius: 3px; }
.ofm-disc-rail-item {
  position: relative;
  flex: 0 0 130px;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(111,100,210,.2);
  transition: transform .25s ease, border-color .25s ease;
  background: rgba(25,22,59,.5);
}
.ofm-disc-rail-item:hover {
  transform: translateY(-3px);
  border-color: rgba(111,100,210,.6);
}
.ofm-disc-rail-item img {
  width: 100%;
  aspect-ratio: 1/1.2;
  object-fit: cover;
  display: block;
}
.ofm-disc-rail-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 8px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(25,22,59,.95) 60%);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ofm-disc-rail-pct {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.82);
  font-size: 10px;
  font-weight: 900;
  color: #fff;
}

/* FOOTER CTA */
.ofm-disc-foot {
  text-align: center;
  padding-top: 8px;
}
.ofm-disc-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 14px;
  background: linear-gradient(141deg, rgba(79,66,198,.18), rgba(50,43,116,.18));
  border: 1px solid rgba(111,100,210,.4);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: background .3s ease, border-color .3s ease, transform .25s ease;
}
.ofm-disc-foot-cta:hover {
  background: linear-gradient(141deg, rgba(79,66,198,.35), rgba(50,43,116,.35));
  border-color: rgba(111,100,210,.7);
  transform: translateY(-2px);
  color: #fff;
}
.ofm-disc-foot-cta svg { flex-shrink: 0; }

/* TIER VARIANTS */
.ofm-disc-feat-tier-exclusive,
.ofm-disc-sim-tier-exclusive {
  background: linear-gradient(141deg, #e3b341 0%, #a67c00 100%) !important;
  color: #19163b !important;
  box-shadow: 0 4px 14px rgba(227,179,65,.4) !important;
}
.ofm-disc-feat-tier-ambassador,
.ofm-disc-sim-tier-ambassador {
  background: linear-gradient(141deg, #ff8c42 0%, #d65a1f 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255,140,66,.4) !important;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .ofm-disc-similar-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ofm-disc-featured { grid-template-columns: 1fr; }
  .ofm-disc-feat-body { padding: 22px 20px; }
  .ofm-disc-head { flex-direction: column; align-items: flex-start; }
  .ofm-disc-cat { align-self: stretch; text-align: center; }
}
@media (max-width: 540px) {
  .ofm-disc { margin: 40px auto 60px; padding: 0 14px; }
  .ofm-disc-feat-cta-row { flex-direction: column; align-items: stretch; }
  .ofm-disc-feat-cta { justify-content: center; }
  .ofm-disc-rail-item { flex: 0 0 110px; }
}

/* ============================================================
   30) Homepage hero — full-width breakout
   ============================================================ */
body.home .ofm-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 0 32px 32px !important;
}
/* Kill the wrapping <p> margin around the hero */
body.home .entry-content &gt; p:has(&gt; .ofm-hero) {
    margin: 0 !important;
    padding: 0 !important;
}
/* Inner content keeps centered + max-width */
body.home .ofm-hero-inner {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 56px 24px 48px !important;
}
/* Stat blocks: equal size + center */
body.home .ofm-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    gap: 12px !important;
}
@media (max-width: 700px) {
    body.home .ofm-hero { border-radius: 0 0 22px 22px !important; }
    body.home .ofm-hero-inner { padding: 36px 18px 30px !important; }
    body.home .ofm-hero-stats { grid-template-columns: repeat(2, 1fr) !important; max-width: 420px; }
}

/* Hero stats — force equal width + equal gaps */
body.home .ofm-hero-stats,
.ofm-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.home .ofm-hero-stats &gt; li,
.ofm-hero-stats &gt; li {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    align-self: stretch !important;
}
@media (max-width: 700px) {
    body.home .ofm-hero-stats,
    .ofm-hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 420px !important;
    }
}

/* ============================================================
   32) Contact page — visual layout
   ============================================================ */
.page-id-196 .sf-contact-hero{position:relative;margin:0 -50vw 32px;left:50%;right:50%;width:100vw;padding:64px 24px;background:linear-gradient(141deg,#19163b 0%,#322b74 60%,#4f42c6 130%);color:#fff;border-radius:0 0 28px 28px;overflow:hidden;text-align:center}
.page-id-196 .sf-contact-hero::before{content:"";position:absolute;top:-100px;right:-100px;width:380px;height:380px;background:radial-gradient(circle,rgba(143,134,222,.4) 0%,transparent 70%);pointer-events:none}
.page-id-196 .sf-contact-hero::after{content:"";position:absolute;bottom:-120px;left:-120px;width:320px;height:320px;background:radial-gradient(circle,rgba(79,66,198,.35) 0%,transparent 70%);pointer-events:none}
.page-id-196 .sf-contact-hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.page-id-196 .sf-contact-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:18px}
.page-id-196 .sf-pulse{width:8px;height:8px;border-radius:50%;background:#a8a0ff;box-shadow:0 0 0 0 rgba(168,160,255,.6);animation:sfPulse 1.8s infinite}
.page-id-196 .sf-contact-h1, .page-id-196 h2.sf-contact-h1{font-size:clamp(28px,4vw,46px);font-weight:900;margin:0 0 14px;line-height:1.1;letter-spacing:-.02em;color:#fff}
.page-id-196 .sf-contact-lead{font-size:17px;color:rgba(255,255,255,.85);max-width:560px;margin:0 auto;line-height:1.55}
.page-id-196 .sf-contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:0 auto 36px;padding:0 20px}
.page-id-196 .sf-contact-card{position:relative;background:#fff;border-radius:18px;padding:24px 22px 22px;border:1px solid #e6e3f5;box-shadow:0 12px 30px rgba(63,53,165,.08);text-decoration:none;color:#19163b;display:flex;flex-direction:column;gap:6px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.page-id-196 .sf-contact-card:hover{transform:translateY(-4px);border-color:#6f64d2;box-shadow:0 20px 44px rgba(63,53,165,.18);color:#19163b}
.page-id-196 .sf-contact-card-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(141deg,#4f42c6,#322b74);color:#fff;margin-bottom:8px}
.page-id-196 .sf-contact-card-icon svg{width:22px;height:22px}
.page-id-196 .sf-contact-card-label{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#6f64d2}
.page-id-196 .sf-contact-card-value{font-size:18px;font-weight:800;color:#19163b;line-height:1.2}
.page-id-196 .sf-contact-card--mail .sf-contact-card-value{color:#3f35a5;word-break:break-all}
.page-id-196 .sf-contact-card-meta{font-size:13px;color:#6b7280}
.page-id-196 .sf-contact-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1100px;margin:0 auto 44px;padding:0 20px}
.page-id-196 .sf-info-card{background:#f8f7fc;border:1px solid #e6e3f5;border-radius:16px;padding:22px 24px}
.page-id-196 .sf-info-card h3{margin:0 0 8px;font-size:17px;font-weight:800;color:#19163b}
.page-id-196 .sf-info-card p{margin:0;font-size:14px;color:#374151;line-height:1.6}
.page-id-196 .sf-info-card a{color:#4f42c6;font-weight:700}
.page-id-196 .sf-contact-cta{max-width:1100px;margin:0 auto 60px;padding:0 20px}
.page-id-196 .sf-contact-cta-inner{background:linear-gradient(141deg,#322b74 0%,#4f42c6 100%);border-radius:20px;padding:40px 32px;text-align:center;color:#fff;position:relative;overflow:hidden}
.page-id-196 .sf-contact-cta-inner::before{content:"";position:absolute;top:-80px;right:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%)}
.page-id-196 .sf-contact-cta-inner h2{margin:0 0 8px;font-size:24px;font-weight:900;color:#fff;position:relative}
.page-id-196 .sf-contact-cta-inner p{margin:0 0 20px;color:rgba(255,255,255,.85);font-size:15px;position:relative}
.page-id-196 .sf-contact-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:12px;background:#fff;color:#322b74;text-decoration:none;font-weight:800;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .25s ease;position:relative}
.page-id-196 .sf-contact-cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.28);color:#322b74}
.page-id-196 .sf-contact-cta-btn svg{transition:transform .2s ease}
.page-id-196 .sf-contact-cta-btn:hover svg{transform:translateX(3px)}
@media (max-width:780px){.page-id-196 .sf-contact-cards,.page-id-196 .sf-contact-info-grid{grid-template-columns:1fr}.page-id-196 .sf-contact-hero{padding:48px 18px}}

/* ============================================================
   34) Blog listing page (/blog) — same compact card look
   ============================================================ */
/* Hide date + category on blog listing cards */
body.blog .loop-entry .entry-taxonomies,
body.blog .loop-entry .entry-meta,
body.blog .loop-entry .posted-on,
body.blog .loop-entry .entry-meta-divider-dot,
body.category .loop-entry .entry-taxonomies,
body.category .loop-entry .entry-meta {
    display: none !important;
}

/* Cards styling — match related-posts look */
body.blog .loop-entry,
body.category .loop-entry {
    background: #fff !important;
    border: 1px solid #e6e3f5 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 28px rgba(63,53,165,.08) !important;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
body.blog .loop-entry:hover,
body.category .loop-entry:hover {
    transform: translateY(-4px);
    border-color: #6f64d2 !important;
    box-shadow: 0 18px 40px rgba(63,53,165,.18) !important;
}
body.blog .loop-entry .post-thumbnail,
body.category .loop-entry .post-thumbnail {
    display: block;
    overflow: hidden;
}
body.blog .loop-entry .post-thumbnail img,
body.category .loop-entry .post-thumbnail img {
    transition: transform .5s ease;
}
body.blog .loop-entry:hover .post-thumbnail img,
body.category .loop-entry:hover .post-thumbnail img {
    transform: scale(1.06);
}
body.blog .loop-entry .entry-content-wrap,
body.category .loop-entry .entry-content-wrap {
    padding: 20px 22px !important;
}
body.blog .loop-entry .entry-title,
body.category .loop-entry .entry-title {
    margin: 0 0 8px !important;
}
body.blog .loop-entry .entry-title a,
body.category .loop-entry .entry-title a {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #19163b !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
}
body.blog .loop-entry .entry-title a:hover,
body.category .loop-entry .entry-title a:hover {
    color: #4f42c6 !important;
}
body.blog .loop-entry .entry-summary p,
body.category .loop-entry .entry-summary p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 14px !important;
}
body.blog .loop-entry .post-more-link,
body.category .loop-entry .post-more-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 18px !important;
    border-radius: 10px;
    background: linear-gradient(141deg,#4f42c6,#322b74) !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(63,53,165,.28);
    transition: transform .2s ease, box-shadow .25s ease;
}
body.blog .loop-entry .post-more-link:hover,
body.category .loop-entry .post-more-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(63,53,165,.45);
}

/* ============================================================
   31) Sidebar: Most viewed blogs (sf-popular)
   ============================================================ */
.sf-popular{
    background:#fff;
    border:1px solid #e6e3f5;
    border-radius:18px;
    padding:20px 18px;
    box-shadow:0 10px 30px rgba(63,53,165,.08);
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
}
.sf-popular-head{margin-bottom:16px}
.sf-popular-eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border-radius:999px;
    background:linear-gradient(141deg,#4f42c6,#322b74);
    font-size:10px;font-weight:800;letter-spacing:1.2px;
    text-transform:uppercase;color:#fff;
    margin-bottom:8px;
}
.sf-popular-h3{
    margin:0;font-size:17px;font-weight:900;
    color:#19163b;line-height:1.15;
}
.sf-popular-list{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:8px;
    counter-reset:sfpop;
}
.sf-popular-item{margin:0;padding:0}
.sf-popular-link{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;color:#19163b;
    padding:8px;border-radius:10px;
    transition:background .2s ease;
    min-width:0;
}
.sf-popular-link:hover{background:#f5f3ff;color:#19163b}
.sf-popular-rank{
    flex:0 0 22px;
    font-size:18px;font-weight:900;
    color:#6f64d2;
    line-height:1;
    text-align:center;
}
.sf-popular-thumb{
    flex:0 0 56px;
    width:56px;height:56px;
    border-radius:8px;overflow:hidden;
    background:#e6e3f5;
}
.sf-popular-thumb img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform .35s ease;
}
.sf-popular-link:hover .sf-popular-thumb img{transform:scale(1.08)}
.sf-popular-body{
    flex:1;min-width:0;
    display:flex;flex-direction:column;gap:4px;
}
.sf-popular-title{
    font-size:12.5px;font-weight:700;
    line-height:1.3;color:#19163b;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
}
.sf-popular-views{
    display:inline-flex;align-items:center;gap:4px;
    font-size:10px;color:#6b7280;font-weight:600;
}
.sf-popular-views svg{color:#a8a0ff;flex-shrink:0}

/* Ensure sidebar widget container doesn't overflow */
.primary-sidebar.widget-area .widget,
.primary-sidebar.widget-area .widget_block{
    overflow:hidden;
    max-width:100%;
    box-sizing:border-box;
}

/* ============================================================
   35) Vergelijkbare berichten — onder blog content, in kolom
   ============================================================ */
.sf-related{
    background:linear-gradient(141deg,#f8f7fc 0%,#eef0f3 100%);
    padding:36px 28px 40px;
    margin:40px 0 0;
    border:1px solid #e6e3f5;
    border-radius:18px;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
}
.sf-related-inner{
    margin:0;padding:0;
    max-width:100%;
    box-sizing:border-box;
}
.sf-related-head{text-align:left;margin-bottom:24px}
.sf-related-eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 11px;border-radius:999px;
    background:linear-gradient(141deg,#4f42c6,#322b74);
    font-size:10px;font-weight:800;letter-spacing:1.3px;
    text-transform:uppercase;color:#fff;
    margin-bottom:10px;
    box-shadow:0 4px 12px rgba(63,53,165,.25);
}
.sf-related-h2{
    margin:0;
    font-size:clamp(20px,2.4vw,26px);
    font-weight:900;color:#19163b;
    line-height:1.15;letter-spacing:-.3px;
}
.sf-related-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.sf-related-card{
    display:flex;flex-direction:column;
    background:#fff;
    border:1px solid #e6e3f5;
    border-radius:14px;overflow:hidden;
    text-decoration:none;color:#19163b;
    box-shadow:0 6px 18px rgba(63,53,165,.08);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.sf-related-card:hover{
    transform:translateY(-3px);
    border-color:#6f64d2;
    box-shadow:0 14px 32px rgba(63,53,165,.18);
    color:#19163b;
}
.sf-related-thumb{
    display:block;overflow:hidden;
    aspect-ratio:16/10;background:#e6e3f5;
}
.sf-related-thumb img{
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform .45s ease;
}
.sf-related-card:hover .sf-related-thumb img{transform:scale(1.06)}
.sf-related-body{
    padding:14px 16px 16px;
    display:flex;flex-direction:column;
    gap:8px;flex:1;
}
.sf-related-title{
    font-size:14px;font-weight:800;
    line-height:1.3;color:#19163b;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.sf-related-card:hover .sf-related-title{color:#4f42c6}
.sf-related-cta{
    margin-top:auto;
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:800;letter-spacing:.3px;
    color:#6f64d2;
}
.sf-related-cta svg{transition:transform .25s ease;width:11px;height:11px}
.sf-related-card:hover .sf-related-cta svg{transform:translateX(3px)}

@media (max-width:520px){
    .sf-related{padding:24px 18px 28px}
    .sf-related-grid{grid-template-columns:1fr}
}

/* Hide Kadence carousel if it ever renders alongside */
.entry-related.entry-related-style-wide{display:none !important}

/* sf-related: 4 kolommen, compactere cards */
.sf-related-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px !important}
.sf-related-thumb{aspect-ratio:1/1 !important}
.sf-related-body{padding:10px 12px 12px !important;gap:6px !important}
.sf-related-title{font-size:12px !important;line-height:1.25 !important;-webkit-line-clamp:2 !important}
.sf-related-cta{font-size:10px !important;letter-spacing:.2px !important}
.sf-related-cta svg{width:10px !important;height:10px !important}
@media (max-width:900px){.sf-related-grid{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width:480px){.sf-related-grid{grid-template-columns:1fr !important}}

/* Single-model popup: respect HTML [hidden] attribute */
.ofm-sm-popup[hidden]{display:none !important}


.page-id-196 .entry-hero{display:none !important}