/*
Theme Name: HPR 2026
Description: HonestPornReviews redesign theme, built from the Figma mockup set (purple/pink gradient, pill nav, card-based layout).
Author: HonestPornReviews
Version: 1.0.0
*/

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    --hpr-gradient: linear-gradient(135deg, #ec4899 0%, #a855f7 55%, #8b7ff5 100%);
    /* The pink-to-blue brand gradient (header, welcome box, Harry and quiz
       banners) and the Visit button gradient; deeper in dark mode. */
    --hpr-grad-pink: #ff62ef;
    --hpr-grad-blue: #76c2ff;
    --hpr-btn-pink: #e873f2;
    --hpr-btn-blue: #77c2ff;
    /* Call-to-action buttons (Redeem, Buy Now, Visit Site, Submit...): purple to blue. */
    --hpr-cta-gradient: linear-gradient(90deg, var(--hpr-purple-fill) 0%, #3b9cf5 100%);
    --hpr-purple-dark: #4c1d95;
    --hpr-purple: #7c3aed;
    --hpr-pink: #ec4899;
    --hpr-navy: #1a1a2e;
    --hpr-bg: #eef1fb;
    --hpr-page-bg: #cbd7f8;
    --hpr-white: #ffffff;        /* white text and marks (stays white in dark mode) */
    --hpr-card: #ffffff;         /* cards and boxes */
    --hpr-panel: #ffffff;        /* the main content panel */
    --hpr-panel-2: #f9f9f9;
    --hpr-panel-edge: #eeeeee;
    --hpr-chip: #ffffff;         /* price chips on review cards */
    --hpr-chip-2: #f3f3f3;
    --hpr-chip-text: rgba(0, 0, 0, 0.36);
    --hpr-chip-shadow: #ffffff;
    --hpr-line-ece9f5: #ece9f5;
    --hpr-line-e3def5: #e3def5;
    --hpr-line-e5e7eb: #e5e7eb;
    --hpr-line-efecf8: #efecf8;
    --hpr-line-eef0f6: #eef0f6;
    --hpr-line-e6e1f5: #e6e1f5;
    --hpr-line-d5dbef: #d5dbef;
    --hpr-line-d1d5db: #d1d5db;
    --hpr-line-e3e0f0: #e3e0f0;
    --hpr-line-d8d2f0: #d8d2f0;
    --hpr-ink: #000000;          /* titles */
    --hpr-ink-2: #111111;
    --hpr-text-muted: #6d6d6d;
    --hpr-purple-fill: #7c3aed;  /* purple buttons keep their colour in dark mode */
    --hpr-purple-dark-fill: #4c1d95;
    --hpr-success-bg: #ecfdf3;
    --hpr-green-800: #166534;
    --hpr-green-700: #15803d;
    --hpr-green-600: #16a34a;
    --hpr-error-bg: #fef2f2;
    --hpr-error-text: #b91c1c;
    --hpr-warn-bg: #fff7e6;
    --hpr-text: #333344;
    --hpr-text-light: #6b7280;
    --hpr-green: #22c55e;
    --hpr-score-bg: #1e1b3a;
    --hpr-gold: linear-gradient(180deg, #f7c430 0%, #d98e04 100%); /* score badges */
    --hpr-gold-text: #b7790a;    /* "SCORE" labels and score numbers in text */
    /* Score tiers on review cards (hpr2026_score_tier): green 9.0+, gold 8.0-8.9, bronze below. */
    --hpr-tier-green: linear-gradient(180deg, #3fcf7f 0%, #1a8a49 100%);
    --hpr-tier-green-text: #17793f;
    --hpr-tier-bronze: linear-gradient(180deg, #d39a72 0%, #9a5a34 100%);
    --hpr-tier-bronze-text: #94532c;
    --hpr-orange: #f97316;
    --hpr-red: #ef4444;
    --hpr-radius-pill: 999px;
    --hpr-radius: 10px;
    --hpr-max-width: 1200px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--hpr-text);
    background: var(--hpr-page-bg);
}

.hpr-container {
    max-width: var(--hpr-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Header
   ========================================================================== */
/*
 * Sticky header: it follows the page down as the visitor scrolls, and slims
 * once they have scrolled (.is-scrolled, js/header-scroll.js).
 * Above phone width it is a two-row grid: logo, search, language and dark
 * mode on top; the nav pills underneath. (On phones, a logo + hamburger bar.)
 */
.site-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 1001; /* Above the phone menu backdrop (1000). */
    padding: 10px 0;
    transition: padding 0.2s ease;
}

.header-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 -20px;
    padding: 24px 20px;
    background: radial-gradient(ellipse 140% 140% at 0% 115%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%);
    box-shadow: 8px 10px 14px rgba(0, 0, 0, 0.11);
    border-radius: 16px;
    transition: padding 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
}

.site-logo-link .site-logo,
.site-logo-link img,
.custom-logo-link img {
    display: block;
    width: 440px;
    max-width: 100%;
    height: auto;
    transition: width 0.2s ease;
}

@media (min-width: 601px) {
    .header-hero {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "logo search lang toggle"
            "nav  nav    nav  nav";
        align-items: center;
        gap: 14px 18px;
        padding: 16px 24px 14px;
    }
    /* The wrappers step aside so their children sit in the grid (the
       extra .header-hero beats the pill-nav rules further down). */
    .header-hero > .header-hero-top,
    .header-hero > .header-hero-nav {
        display: contents;
    }
    .site-logo-link,
    .custom-logo-link {
        grid-area: logo;
    }
    .site-logo-link .site-logo,
    .site-logo-link img,
    .custom-logo-link img {
        width: 250px;
    }
    .nav-search {
        grid-area: search;
        justify-self: center;
        width: 100%;
        max-width: 440px;
    }
    .lang-switcher {
        grid-area: lang;
    }
    .theme-toggle {
        grid-area: toggle;
    }
    .nav-menu {
        grid-area: nav;
        justify-self: center;
        max-width: 100%;
    }

    /* Scrolled: one slimmer bar's worth of padding, a smaller logo, a
       firmer shadow so it reads as floating over the page. */
    .site-header.is-scrolled {
        padding-top: 6px;
    }
    .site-header.is-scrolled .header-hero {
        gap: 10px 18px;
        padding: 10px 24px 10px;
        box-shadow: 0 10px 28px rgba(31, 20, 70, 0.28);
    }
    .site-header.is-scrolled .site-logo-link .site-logo,
    .site-header.is-scrolled .site-logo-link img,
    .site-header.is-scrolled .custom-logo-link img {
        width: 190px;
    }
}

/*
 * Wide screens: everything on one line, logo | nav pills | search | language |
 * dark mode. The search is a round button that opens into a field over the
 * nav (to its left) while in use, so the line never reflows.
 */
@media (min-width: 1180px) {
    .header-hero {
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas: "logo nav search lang toggle";
        gap: 14px;
        padding: 12px 20px;
    }
    .site-logo-link .site-logo,
    .site-logo-link img,
    .custom-logo-link img {
        width: 210px;
    }
    .site-header.is-scrolled .header-hero {
        padding: 8px 20px;
    }
    .site-header.is-scrolled .site-logo-link .site-logo,
    .site-header.is-scrolled .site-logo-link img,
    .site-header.is-scrolled .custom-logo-link img {
        width: 170px;
    }
    .header-hero .nav-menu ul {
        flex-wrap: nowrap;
        gap: 6px;
    }
    .header-hero .nav-menu a {
        padding: 5px 14px;
        font-size: 14px;
        border-width: 2px;
    }
    html[lang^="fr"] .header-hero .nav-menu a {
        padding-left: 11px;
        padding-right: 11px;
    }

    .header-hero .nav-search {
        position: relative;
        justify-self: end;
        width: 44px;
        max-width: none;
        height: 44px;
    }
    /* Just the round magnifier here: it opens the search popup. */
    .header-hero .nav-search .hpr-search-form {
        width: 44px;
    }
    .header-hero .nav-search .search-input-wrapper {
        justify-content: center;
        width: 44px;
        height: 44px;
        box-sizing: border-box;
        padding: 0;
        border-width: 2px;
        cursor: pointer;
    }
    .header-hero .nav-search .search-submit svg {
        width: 18px;
        height: 18px;
    }
    .header-hero .nav-search .search-field {
        display: none;
    }
    html[lang^="fr"] .header-hero .nav-search .search-input-wrapper {
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .header-hero,
    .site-logo-link img,
    .custom-logo-link img,
    .search-popup,
    .search-popup::backdrop {
        transition: none;
        animation: none;
    }
}

/* Search popup (header.php): a card near the top of the screen over a dimmed,
   blurred page. A native <dialog>: Escape closes it and focus stays inside. */
.search-popup {
    width: min(660px, calc(100vw - 32px));
    max-width: none;
    margin: 14vh auto auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--hpr-card);
    color: var(--hpr-text);
    box-shadow: 0 24px 60px rgba(31, 20, 70, 0.35);
    overflow: visible;
}

.search-popup[open] {
    animation: hpr-popup-in 0.18s ease-out;
}

.search-popup::backdrop {
    background: rgba(25, 14, 60, 0.5);
    backdrop-filter: blur(4px);
}

@keyframes hpr-popup-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.search-popup-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 20px;
    border-radius: 18px;
    /* A thin brand-gradient ring around the card. */
    border: 2px solid transparent;
    background:
        linear-gradient(var(--hpr-card), var(--hpr-card)) padding-box,
        radial-gradient(ellipse 140% 140% at 0% 115%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%) border-box;
}

.search-popup-icon {
    flex-shrink: 0;
    color: var(--hpr-purple);
}

.search-popup-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--hpr-ink);
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.search-popup-field::placeholder {
    color: var(--hpr-text-light);
    font-weight: 600;
}

.search-popup-field::-webkit-search-cancel-button {
    display: none;
}

.search-popup-submit {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 14px;
}

.search-popup-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    padding: 0 0 2px;
    border: 0;
    border-radius: 50%;
    background: var(--hpr-card);
    box-shadow: 0 4px 12px rgba(31, 20, 70, 0.3);
    color: var(--hpr-purple-dark);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

@media (hover: hover) {
    .search-popup-close:hover {
        color: var(--hpr-purple);
    }
}

@media (max-width: 600px) {
    .search-popup {
        margin-top: 12vh;
    }
    .search-popup-field {
        font-size: 17px;
    }
    .search-popup-submit {
        display: none;
    }
    .search-popup-close {
        top: -12px;
        right: -6px;
    }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * header-hero-top wraps the logo + the mobile hamburger button. On
 * tablet/desktop it renders as if it weren't there at all (display:
 * contents), so the logo keeps its existing centered position and the
 * button stays hidden; only the sub-600px rules below turn it into an
 * actual logo-left / hamburger-right bar.
 */
.header-hero-top {
    display: contents;
}

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(0, 0, 0, 0.31);
    border-radius: var(--hpr-radius);
}

.mobile-menu-toggle-bars,
.mobile-menu-toggle-bars::before,
.mobile-menu-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--hpr-card);
    border-radius: 2px;
}

.mobile-menu-toggle-bars {
    position: relative;
}

.mobile-menu-toggle-bars::before,
.mobile-menu-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.mobile-menu-toggle-bars::before {
    top: -6px;
}

.mobile-menu-toggle-bars::after {
    top: 6px;
}

.mobile-nav-close {
    display: none;
}

.mobile-nav-backdrop {
    display: none;
}

/* ==========================================================================
   Pill navigation
   ========================================================================== */
.header-hero-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.nav-menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border-radius: var(--hpr-radius-pill);
    background: rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(0, 0, 0, 0.31);
    color: var(--hpr-white);
    font-size: 15px;
    font-weight: 700;
    font-variant-caps: small-caps;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-menu li a.active,
.nav-menu a:hover,
.nav-menu li.current-menu-item a {
    background: linear-gradient(180deg, #ffffff 0%, #d7d7d7 100%);
    border-color: rgba(0, 0, 0, 0.31);
    color: #000000;
}

/* French labels run longer than English ones; slightly tighter pills keep
   the menu and search on one row at the same widths as in English. */
html[lang^="fr"] .nav-menu a {
    padding-left: 15px;
    padding-right: 15px;
}

html[lang^="fr"] .hpr-search-form .search-input-wrapper {
    padding-left: 16px;
    padding-right: 16px;
}

/* ==========================================================================
   Language switcher: top-right of the header; a row in the phone menu
   ========================================================================== */
.lang-switcher {
    position: relative;
    margin: 0;
    color: var(--hpr-white);
}

/* The button: "EN" + chevron. */
.lang-switcher-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px 6px 13px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: var(--hpr-radius-pill);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.lang-switcher-current::-webkit-details-marker {
    display: none;
}

.lang-switcher-current:focus-visible {
    outline: 2px solid var(--hpr-white);
    outline-offset: 2px;
}

.lang-switcher .country-flag {
    flex-shrink: 0;
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.lang-switcher-chevron {
    transition: transform 0.15s ease;
}

.lang-switcher[open] .lang-switcher-chevron {
    transform: rotate(180deg);
}

/* The menu: a white card under the button. */
.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(31, 20, 70, 0.25);
}

.lang-switcher-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #2d2a4a;
    font-size: 14px;
    font-weight: 700;
}

.lang-switcher-menu a.is-current {
    background: #f1ecff;
    color: #4c1d95;
}

.lang-switcher-menu-code {
    margin-left: auto;
    color: #8a87a3;
    font-size: 12px;
    letter-spacing: 0.06em;
}

@media (hover: hover) {
    .lang-switcher-current:hover {
        background: rgba(0, 0, 0, 0.3);
    }
    .lang-switcher-menu a:hover {
        background: #f5f2ff;
    }
}

/* Narrow tablets: a smaller logo leaves the search room. */
@media (min-width: 601px) and (max-width: 860px) {
    .site-logo-link .site-logo,
    .site-logo-link img,
    .custom-logo-link img,
    .site-header.is-scrolled .site-logo-link img,
    .site-header.is-scrolled .custom-logo-link img {
        width: 170px;
    }
}

/* ==========================================================================
   Search pill
   ========================================================================== */
.nav-search {
    display: flex;
}

.nav-search,
.nav-search .hpr-search-form,
.nav-search .search-input-wrapper {
    min-width: 0;   /* A search field keeps a minimum width; let it shrink. */
}

.nav-search .hpr-search-form {
    flex: 1 1 auto;
}

.hpr-search-form .search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 22px 8px 18px;
    background: rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(0, 0, 0, 0.31);
    border-radius: var(--hpr-radius-pill);
    cursor: text;
}

/* The magnifier first, then the field reading "Search" (page.png). */
.hpr-search-form .search-field {
    border: none;
    background: transparent;
    outline: none;
    color: var(--hpr-white);
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 0;
}

.hpr-search-form .search-field::placeholder {
    color: var(--hpr-white);
    opacity: 1;
}

.hpr-search-form .search-field::-webkit-search-cancel-button {
    display: none;
}

.hpr-search-form .search-submit {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--hpr-white);
    cursor: pointer;
}

.hpr-search-form .search-submit svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Secondary tag bar
   ========================================================================== */
.tag-bar {
    padding: 10px 0;
}

.tag-bar .hpr-container {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #8ac5f5;
    border-radius: 8px;
}

.tag-bar-label {
    flex: 0 0 auto;
    color: #5d92be;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 27px;
    letter-spacing: 0.29em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-bar ul {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.tag-bar li {
    flex: 0 0 auto;
}

.tag-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: rgba(93, 146, 190, 0.5);
    border-radius: 4px;
    color: var(--hpr-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tag-bar a:hover {
    background: rgba(93, 146, 190, 0.8);
    color: var(--hpr-white);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-container {
    display: grid;
    grid-template-columns: 304px 1fr;
    gap: 30px;
    max-width: var(--hpr-max-width);
    margin: 10px auto;
    align-items: start;
}

/* Breadcrumbs: a full-width row above the sidebar and content. */
.breadcrumbs {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0 4px;
    font-size: 13px;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--hpr-text-light);
}

.breadcrumbs li + li::before {
    content: "›";
    margin: 0 8px;
    color: #8b93b8;
    font-weight: 700;
}

.breadcrumbs a {
    color: var(--hpr-purple);
    font-weight: 600;
    text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
    color: var(--hpr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}

.sidebar-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-width: 0;
    padding: 25px;
    background: radial-gradient(ellipse 48.07% 76.93% at 44% 18.29%, var(--hpr-panel) 0%, var(--hpr-panel-2) 100%),
                radial-gradient(ellipse 50% 50% at 50% 50%, var(--hpr-panel) 0%, var(--hpr-panel-edge) 100%);
    box-shadow: 10px 12px 16.1px rgba(0, 0, 0, 0.11);
    border-radius: 15px;
}

.main-content > * {
    width: 100%;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar-left .widget {
    width: 100%;
    padding: 25px;
    background: var(--hpr-card);
    border-radius: 15px;
    box-shadow: 10px 12px 16.1px rgba(0, 0, 0, 0.11);
}

.sidebar-left .widget-title {
    display: flex;
    align-items: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: var(--hpr-ink);
    margin-bottom: 12px;
}

.sidebar-left .widget ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
}

.sidebar-left .top-review-item,
.sidebar-left .widget ul li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 5px 16px;
    background: rgba(255, 255, 255, 0.01);
    border-top: 2px solid var(--hpr-card);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.sidebar-left .top-review-item a,
.sidebar-left .widget ul li a {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: var(--hpr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-left .top-review-score {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    color: var(--hpr-gold-text);
    opacity: 0.75;
}

.sidebar-left .socials {
    display: flex;
    gap: 12px;
}

.sidebar-left .socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hpr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hpr-purple-dark);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    padding: 20px 0 0;
    margin-top: 40px;
}

.site-footer .hpr-container {
    background: linear-gradient(180deg, #a9d2f7 0%, #7cb6ef 100%);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 12px 30px rgba(47, 99, 158, 0.25);
}

.site-footer .footer-tags-box {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 24px 30px;
    margin-bottom: 30px;
}

.site-footer .footer-heading {
    text-align: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(38, 68, 102, 0.75);
    margin-bottom: 18px;
}

.site-footer .footer-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.site-footer .footer-tags a {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: rgba(65, 110, 156, 0.55);
    border-radius: 6px;
    color: var(--hpr-white);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s ease;
}

.site-footer .footer-tags a:hover {
    background: rgba(65, 110, 156, 0.8);
}

.site-footer .footer-links {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

/* A real footer menu prints bare <li>s (items_wrap is %3$s, no <ul>). */
.site-footer .footer-links li {
    list-style: none;
}

.site-footer .footer-links a {
    color: var(--hpr-white);
    font-size: 15px;
    font-weight: 700;
}

.site-footer .footer-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 26px;
}

.site-footer .footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(45, 84, 125, 0.55);
    transition: color 0.15s ease;
}

.site-footer .footer-badge:hover {
    color: rgba(45, 84, 125, 0.85);
}

.site-footer .footer-badge-text {
    text-align: center;
}

.site-footer .footer-badge-text strong {
    display: block;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.site-footer .footer-badge-text small {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.35;
    margin-top: 3px;
}

.site-footer .footer-legal {
    max-width: 780px;
    margin: 0 auto 26px;
    text-align: center;
}

.site-footer .footer-legal p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 12px;
}

.site-footer .footer-legal a {
    color: var(--hpr-white);
}

.site-footer .footer-signature {
    text-align: center;
    margin-bottom: 10px;
}

.site-footer .footer-signature img {
    height: auto;
    max-height: 46px;
    width: auto;
    margin: 0 auto;
}

.site-footer .copyright {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Page intro / section headings
   ========================================================================== */
.hpr-section {
    margin-bottom: 0;
}

.hpr-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 25px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    background: radial-gradient(ellipse 60.18% 681.91% at -2.2% 225%, rgba(255, 98, 239, 0.91) 0%, rgba(118, 194, 255, 0.91) 100%), #000000;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 18px;
}

.hpr-section-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
    color: #83a0e5;
    margin-bottom: 24px;
}

/* ==========================================================================
   Editor's Pick carousel
   ========================================================================== */
.editors-pick-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--hpr-radius);
}

.editors-pick-track {
    display: flex;
    transition: transform 0.4s ease;
}

.editors-pick-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.editors-pick-card {
    position: relative;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: var(--hpr-radius);
    box-shadow: 0 8px 24px rgba(76, 29, 149, 0.08);
    padding: 20px 24px 20px 20px;
}

.editors-pick-score {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2; /* Above the card's links (z-index 1), incl. the photo on phones. */
}

/*
 * The container itself (a plain div, not the <img>) owns the fixed square
 * aspect ratio. An <img> that fails to decode falls back to sizing itself
 * from its width/height HTML attributes instead of respecting its own
 * aspect-ratio CSS, so putting aspect-ratio on the img directly made a
 * post whose source photo is smaller than this crop size render short and
 * non-square; sizing the (attribute-less) wrapper instead, then stretching
 * the img to 100%/100% of it, is immune to that per-image fallback.
 */
.editors-pick-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--hpr-radius);
    overflow: hidden;
    background: var(--hpr-bg);
}

.editors-pick-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.editors-pick-thumb img,
.editors-pick-thumb .review-card-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editors-pick-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.editors-pick-title,
.editors-pick-date,
.editors-pick-excerpt {
    padding-right: 90px;
}

.editors-pick-title {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--hpr-ink);
    margin-bottom: 6px;
}

.editors-pick-date {
    font-size: 13.5px; /* The review cards' date size. */
    color: var(--hpr-text-light);
    line-height: 1.4;
}

.editors-pick-excerpt {
    font-size: 14px;
    color: var(--hpr-text);
    line-height: 1.55;
    margin: 10px 0 16px;
}

.editors-pick-excerpt + .editors-pick-cats {
    margin-top: -6px;
}

/* Price and buttons at the bottom of the card. */
.review-card-cta.editors-pick-cta {
    margin-top: auto;
    padding-top: 14px;
}

.editors-pick-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}

.editors-pick-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    color: var(--hpr-pink);
}

.editors-pick-next {
    color: var(--hpr-purple);
}

.editors-pick-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editors-pick-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d8d3ee;
}

.editors-pick-dot.is-active {
    background: var(--hpr-gradient);
}

/* ==========================================================================
   Review card
   ========================================================================== */
.review-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 20px 24px;
    align-items: start;
    padding: 22px 24px 0;
    margin-bottom: 16px;
    background: var(--hpr-card);
    border: 6px solid var(--hpr-panel-edge);
    border-radius: var(--hpr-radius);
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
}

.review-card:last-child {
    margin-bottom: 0;
}

.review-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hpr-bg);
}

.review-card-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.review-card-thumb img,
.review-card-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-card-title {
    display: flex;
    align-items: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--hpr-ink);
    margin-bottom: 3px;
}

.review-card-meta {
    display: flex;
    align-items: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.31;
    letter-spacing: -0.02em;
    color: var(--hpr-ink);
    opacity: 0.5;
    margin-bottom: 8px;
}

/* "May 20th, 2020 by Harry": three quarters of the meta line size. */
.review-card-date {
    font-size: 0.75em;
}

.review-card-reviewer {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.review-card-reviewer:hover,
.review-card-reviewer:focus-visible {
    color: var(--hpr-purple-dark);
}

.review-card-excerpt {
    font-size: 13px;
    color: var(--hpr-text);
    line-height: 1.5;
}

/* The review's categories as links, under the excerpt. */
.review-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.review-card-cats .category-pill {
    padding: 4px 12px;
    font-size: 12px;
}

.review-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.review-main-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.review-main-body .review-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.review-card-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    flex: 0 0 auto;
}

.review-card-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.review-card-score-label {
    display: flex;
    align-items: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--hpr-gold-text);
}

.review-card-score-container {
    position: relative;
    width: 94.58px;
    height: 94.58px;
}

.review-card-score {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94.58px;
    height: 94.58px;
    left: 0;
    top: 0;
    background: url("images/review-score-badge-gold.svg?v=2") no-repeat center / contain;
    border-radius: 10.6962px;
    color: #e2a40c;
    font-size: 36px;
    font-weight: 900;
}

.review-card-score-value {
    box-sizing: border-box;
    width: 57px;
    height: 47px;
    left: calc(50% - 57px / 2 + 0.35px);
    top: calc(50% - 47px / 2 - 0.7px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 36.2473px;
    line-height: 1.31;
    letter-spacing: -0.07em;
    background: var(--hpr-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.review-card-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

/* Discounted cards: the price, Full Review and Redeem are one height (the
   buttons stretch to the price's). */
.review-card-cta:has(.review-card-pricing-deal),
.review-card-cta:has(.review-card-pricing-deal) .review-card-actions {
    align-items: stretch;
}

/* "Full Review" (discounted cards only) and the Redeem / Buy Now button. */
.review-card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Full Review: a secondary, outline button beside the gradient Redeem one,
   the same height (2px border + 5px padding = Redeem's 4px + 3px). */
.review-card-full-review {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    border: 2px solid var(--hpr-purple);
    border-radius: 10px;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.31;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hpr-purple-dark);
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.review-card-full-review:hover,
.review-card-full-review:focus-visible {
    background: var(--hpr-bg);
}

.review-card-price {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 15.5px;
    background: linear-gradient(180deg, var(--hpr-chip) 0%, var(--hpr-chip-2) 100%);
    border: 5.47px solid var(--hpr-chip);
    box-shadow: 9.12px 10.94px 14.68px rgba(0, 0, 0, 0.11);
    border-radius: 13.68px;
}

.review-card-price-main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.review-card-price .price {
    display: inline-block;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Price on review cards: plain text, "$14⁹⁵", with the period under it, or
   on discounted cards the normal price (crossed out) over "SAVE 50%". */
.review-card-pricing {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-card-pricing-now {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review-card-pricing-amount {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Positioned, so it would sit above the card-wide link and swallow clicks;
   pointer-events lets clicks through to the link like the rest of the price. */
.review-card-pricing-amount sup {
    position: relative;
    top: 0.1em;
    pointer-events: none;
    margin-left: 1px;
    font-size: 0.5em;
    vertical-align: top;
}

.review-card-pricing-period {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--hpr-text-light);
}

.review-card-pricing-deal {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-card-pricing-regular {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hpr-text-light);
    text-decoration-thickness: 2px;
}

.review-card-pricing-save {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.price-period {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-period-number {
    display: flex;
    align-items: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 27.44px;
    line-height: 1.31;
    color: var(--hpr-chip-text);
    text-shadow: 0 2.61px 0 var(--hpr-chip-shadow);
}

.price-period-unit {
    display: flex;
    align-items: center;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 18.29px;
    line-height: 1.31;
    letter-spacing: 0.05em;
    color: var(--hpr-chip-text);
    filter: drop-shadow(0 2.61px 0 var(--hpr-chip-shadow));
}

.review-card-discount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.discount-label {
    display: inline-block;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: -3px 0;
}

.discount-value {
    display: inline-block;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 25px;
    line-height: 1.31;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.visit-site-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 3px 17px;
    background: var(--hpr-cta-gradient) border-box;
    border: 4px solid transparent; /* Keeps the button's size; the gradient runs under it. */
    border-radius: 10px;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 13px;
    line-height: 1.31;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* The whole card opens the review: a hidden link (.review-card-overlay)
   covers the card, and the card's own links sit above it so they keep
   working. It is a separate link, not the title's, so hovering the card
   does not count as hovering the title. */
.review-card {
    position: relative;
}

.review-card a,
.editors-pick-card a,
.sotw a {
    position: relative;
    z-index: 1;
}

.review-card a.review-card-overlay,
.editors-pick-card a.review-card-overlay,
.sotw a.review-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.review-card-score-badge {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 2; /* Above the photo link (z-index 1), which reaches the corner on phones. */
}

/* Keep the title/excerpt clear of the corner badge. */
.review-card--top-right .review-card-body {
    padding-right: 70px;
}

/* Review card layout: name, byline, excerpt and categories beside the
   photo, the score (label beside the badge) top right, and a tinted footer
   strip across the card with the price, the saving, a "Read full review"
   link and one button to the site. Scoped to .review-card so the Editor's
   Pick card and the Site of the Week banner, which share some classes,
   keep their look. */
.review-card .review-main-body {
    align-items: flex-start;
}

.review-card .review-card-title {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 6px;
}

.review-card .review-card-date {
    font-size: 0.85em;
}

.review-card .review-card-excerpt {
    font-size: 15px;
    line-height: 1.6;
}

.review-card .review-card-cats {
    gap: 8px;
    margin-top: 14px;
}

.review-card .review-card-cats .category-pill {
    padding: 6px 16px;
    font-size: 14px;
}

.review-card .review-card-details .review-card-score-wrap {
    flex-direction: row;
    gap: 12px;
}

.review-card .review-card-details .review-card-score-container,
.review-card .review-card-details .review-card-score {
    width: 64px;
    height: 64px;
}

.review-card .review-card-details .review-card-score-value {
    font-size: 25px;
}

.review-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    padding: 16px 24px;
    background: var(--hpr-bg);
    border-top: 1px solid var(--hpr-line-ece9f5);
}

/* The strip (template-parts/price-strip.php) runs edge to edge along the
   bottom of each card, so it cancels that card's padding. */
.review-card > .review-card-footer {
    grid-column: 1 / -1;
    margin: 0 -24px;
    border-radius: 0 0 4px 4px;
}

.editors-pick-card > .review-card-footer {
    grid-column: 1 / -1;
    margin: 0 -24px -20px -20px;
    padding-left: 20px;
    border-radius: 0 0 9px 9px;
}

.sotw-body > .review-card-footer {
    margin: auto -24px -22px;
}

/* The text column is too narrow for one row: the price and saving on the
   first, "Read full review" and the button (filling the rest) on the second. */
@media (min-width: 601px) {
    .sotw-body > .review-card-footer .review-card-footer-actions {
        width: 100%;
        margin-left: 0;
    }
    .sotw-body > .review-card-footer .review-card-get-btn {
        flex: 1;
    }
}

.review-card-footer-price {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.review-card-footer-amount {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Positioned, so pointer-events lets clicks through to the card-wide link. */
.review-card-footer-amount sup {
    position: relative;
    top: 0.08em;
    pointer-events: none;
    margin-left: 1px;
    font-size: 0.5em;
    vertical-align: top;
}

.review-card-footer-period {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--hpr-text-light);
}

.review-card-footer-deal {
    display: flex;
    gap: 24px;
    padding-left: 24px;
    border-left: 1px solid var(--hpr-line-ece9f5);
}

.review-card-footer-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-card-footer-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--hpr-text-light);
}

.review-card-footer-regular {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hpr-text-light);
    text-decoration-thickness: 2px;
}

.review-card-footer-save {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.review-card-footer-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.review-card-read-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.review-card-read-link:hover,
.review-card-read-link:focus-visible {
    color: var(--hpr-purple);
}

/* The one button: bigger than the usual Visit button, purple to blue. */
.review-card-get-btn {
    padding: 14px 28px;
    border: 0;
    border-radius: 12px;
    font-size: 16px;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 20px rgba(91, 92, 246, 0.25);
}

/* Score tiers (hpr2026_score_tier_class): green for 9.0 and up, gold for
   8.0-8.9, bronze below 8.0, on every score on the site. Hexagon badges
   swap the outline and the number's colour; text scores take the tier's
   text colour; pill scores the tier's fill. */
.score-tier--green {
    --score-tier-text: var(--hpr-tier-green-text);
    --score-tier-pill: #1f9d55;
    --score-tier-pill-text: #ffffff;
}

.score-tier--gold {
    --score-tier-text: var(--hpr-gold-text);
    --score-tier-pill: var(--hpr-gold);
    --score-tier-pill-text: #3d2800;
}

.score-tier--bronze {
    --score-tier-text: var(--hpr-tier-bronze-text);
    --score-tier-pill: #a8653e;
    --score-tier-pill-text: #ffffff;
}

.score-tier--green .review-card-score {
    background-image: url("images/review-score-badge-green.svg?v=2");
    color: var(--hpr-tier-green-text);
}

.score-tier--bronze .review-card-score {
    background-image: url("images/review-score-badge-bronze.svg?v=2");
    color: var(--hpr-tier-bronze-text);
}

.score-tier--green .review-card-score-value {
    background: var(--hpr-tier-green);
    -webkit-background-clip: text;
    background-clip: text;
}

.score-tier--bronze .review-card-score-value {
    background: var(--hpr-tier-bronze);
    -webkit-background-clip: text;
    background-clip: text;
}

.score-tier .review-card-score-label,
.sidebar-left .top-review-score.score-tier,
.compare-score.score-tier,
.az-score.score-tier,
.user-review-score.score-tier {
    color: var(--score-tier-text);
}

.alternative-score.score-tier,
.category-top-score.score-tier,
.best-sites-score.score-tier,
.finder-card-score.score-tier,
.comic-review-score.score-tier {
    background: var(--score-tier-pill);
    color: var(--score-tier-pill-text);
}

@media (max-width: 600px) {
    .review-card {
        padding: 16px 16px 0;
    }
    .review-card .review-card-title {
        font-size: 26px;
    }
    .review-card-footer {
        padding: 14px 16px 16px;
        justify-content: center;
    }
    .review-card > .review-card-footer {
        margin: 0 -16px;
    }
    .editors-pick-card > .review-card-footer {
        margin: 0 -16px -16px;
        padding-left: 16px;
    }
    .review-card-footer-amount {
        font-size: 34px;
    }
    .review-card-footer-deal {
        gap: 16px;
        padding-left: 16px;
    }
    /* The button across the card, the review link under it. */
    .review-card-footer-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        margin-left: 0;
    }
    .review-card-get-btn {
        order: -1;
        width: 100%;
    }
}

/* ==========================================================================
   Blog card
   ========================================================================== */
.blog-card {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hpr-line-e5e7eb);
}

.blog-card-thumb img,
.blog-card-thumb .review-card-thumb-placeholder {
    width: 170px;
    height: 140px;
    border-radius: var(--hpr-radius);
    object-fit: cover;
    background: var(--hpr-bg);
}

.blog-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.blog-card-title a {
    color: var(--hpr-purple-dark);
}

.blog-card-meta {
    font-size: 12px;
    color: var(--hpr-text-light);
    margin-bottom: 8px;
}

.blog-card-excerpt {
    font-size: 13px;
    line-height: 1.5;
}

/* ==========================================================================
   Archive header + sort bar
   ========================================================================== */
.archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

/* main-content's flex gap already spaces the header from the list. */
.main-content > .archive-header {
    margin-bottom: 0;
}

.archive-header .page-title {
    margin-bottom: 0;
}

.sort-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sort-link {
    padding: 8px 16px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-bg);
    color: var(--hpr-text-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.sort-link.active {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

/* Category pages and All Reviews: sort buttons + the All / Has Trial / On Discount dropdown */
.archive-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.deal-filter {
    display: flex;
    margin: 0;
}

.deal-filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 34px 8px 16px;
    border: 0;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    color: var(--hpr-text-light);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    /* No letter-spacing: browsers size the closed dropdown without it, which would cut the label off. */
    text-transform: uppercase;
    cursor: pointer;
}

.deal-filter.is-active .deal-filter-select {
    background-color: var(--hpr-purple-fill);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: var(--hpr-white);
}

.deal-filter-select option {
    background: var(--hpr-card);
    color: var(--hpr-text);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination a,
.pagination span {
    padding: 8px 14px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-bg);
    color: var(--hpr-purple-dark);
    font-size: 13px;
    font-weight: 600;
}

.pagination .current {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

/* ==========================================================================
   Single review
   ========================================================================== */
/* Title and category tags on the left, the overall score top right
   ("OVERALL SCORE" on two lines beside the badge). */
.review-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title score" "tags score";
    align-items: start;
    gap: 12px 20px;
}

.review-hero .page-title {
    grid-area: title;
    margin: 0;
    font-size: 36px;
    line-height: 1.1;
}

.review-hero-tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-hero-tags .category-pill {
    padding: 6px 16px;
    font-size: 14px;
}

.review-hero-score {
    grid-area: score;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.review-hero-score .review-card-score-label {
    width: min-content; /* One word per line. */
    text-align: right;
    line-height: 1.35;
}

/* Chinese has no spaces, so "one word per line" would put each character
   on its own line: one line instead. */
.review-hero-score .review-card-score-label:lang(zh) {
    width: auto;
    white-space: nowrap;
}

.review-hero-score .review-card-score {
    width: 72px;
    height: 72px;
    font-size: 26px;
    letter-spacing: -0.03em;
}

/* One column: the score, price and tools sit inside the review itself. */
.review-layout > .user-reviews-section {
    margin-top: 10px;
}

.review-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.review-gallery-grid img {
    height: auto; /* the image's own shape, whatever its width/height attributes say */
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

.entry-content {
    line-height: 1.8;
    font-size: 15px;
}

.entry-thumbnail {
    width: 100%;
    height: auto;
    border-radius: var(--hpr-radius);
    margin-bottom: 20px;
}

.entry-content h2,
.entry-content h3 {
    color: var(--hpr-purple);
    margin: 24px 0 10px;
}

/* The global reset strips list styling; restore it for plain content lists
   (classed lists like .about-review-links keep their own styles). */
.entry-content ul:not([class]),
.entry-content ol:not([class]) {
    margin: 10px 0 16px;
    padding-left: 22px;
}

.entry-content ul:not([class]) {
    list-style: disc;
}

.entry-content ol:not([class]) {
    list-style: decimal;
}

.entry-content ul:not([class]) > li + li,
.entry-content ol:not([class]) > li + li {
    margin-top: 8px;
}

.entry-content li::marker {
    color: var(--hpr-purple);
}

/* Top Cam Sites: article with a review card under each site's section. */
.cam-sites-article {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cam-site-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--hpr-line-e5e7eb);
}

.cam-site-section .entry-content h2 {
    margin-top: 0;
}

.cam-site-section .entry-content p + p {
    margin-top: 12px;
}

.cam-site-section .review-card {
    margin-bottom: 0;
}

/* About page: "Meet Harry" section. */
.about-harry {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin: 26px 0 8px;
    padding: 22px 24px 0;
    background: radial-gradient(ellipse 60.18% 681.91% at -2.2% 225%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%), #000000;
    border-radius: 15px;
    overflow: hidden;
}

/* Harry stands at the bottom edge of the panel, head to clipboard. */
.about-harry-photo {
    flex: 0 0 170px;
    align-self: flex-end;
    height: 300px;
    overflow: hidden;
}

.about-harry-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.about-harry-text {
    flex: 1;
    min-width: 0;
    padding-bottom: 20px;
    color: #ffffff;
}

.about-harry-text h2 {
    margin-top: 0;
    color: #ffffff;
}

.about-harry-text p + p {
    margin-top: 10px;
}

.about-review-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.about-review-links li a {
    display: inline-block;
    background: var(--hpr-bg);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hpr-purple-dark);
}

.about-review-links li a:hover {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

/* ==========================================================================
   Request a Review page
   ========================================================================== */
.form-notice {
    border-radius: var(--hpr-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
}

.form-notice-success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--hpr-green-700);
}

.form-notice-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--hpr-error-text);
}

.review-request-form {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-request-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.review-request-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hpr-purple-dark);
}

.review-request-form .required {
    color: var(--hpr-red);
}

.review-request-form input,
.review-request-form select,
.review-request-form textarea {
    font: inherit;
    font-size: 14px;
    padding: 10px 14px;
    border: 1px solid var(--hpr-bg);
    border-radius: var(--hpr-radius);
    background: var(--hpr-card);
    color: var(--hpr-text);
}

.review-request-form input:focus,
.review-request-form select:focus,
.review-request-form textarea:focus {
    outline: 2px solid var(--hpr-purple);
    outline-offset: 1px;
}

.review-request-form textarea {
    resize: vertical;
}

/* Request a Review: one box per website, with its review login. */
.rr-note {
    padding: 10px 14px;
    border-left: 4px solid var(--hpr-pink);
    background: rgba(236, 72, 153, 0.06);
    border-radius: 0 var(--hpr-radius) var(--hpr-radius) 0;
}

.webmasters-review-note {
    margin-bottom: 20px;
}

/* 2257 Statement and DMCA pages */
.statement-2257 p + p,
.dmca-page p + p {
    margin-top: 12px;
}

.legal-updated {
    font-size: 13px;
    color: var(--hpr-text-light);
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
}

/* Compare Sites: two-site picker and side-by-side table */
.compare-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 16px;
    background: var(--hpr-card);
    border-radius: var(--hpr-radius);
}

.compare-field {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.compare-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hpr-purple-dark);
}

.compare-field input {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 10px 14px;
    border: 1px solid var(--hpr-line-e3def5);
    border-radius: var(--hpr-radius);
    background: var(--hpr-card);
    color: var(--hpr-text);
}

.compare-field input:focus {
    outline: 2px solid var(--hpr-purple);
    outline-offset: 1px;
}

.compare-form-vs {
    align-self: flex-end;
    padding-bottom: 10px;
    font-weight: 900;
    color: var(--hpr-pink);
    text-transform: uppercase;
}

.compare-submit {
    min-height: 43px;
}

.compare-notice {
    padding: 10px 14px;
    border-left: 4px solid var(--hpr-pink);
    background: rgba(236, 72, 153, 0.06);
    border-radius: var(--hpr-radius);
}

.compare-table-wrap {
    background: var(--hpr-card);
    border-radius: var(--hpr-radius);
    overflow: hidden;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.compare-table th,
.compare-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hpr-line-efecf8);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.compare-table tbody th {
    width: 26%;
    font-weight: 700;
    color: var(--hpr-purple-dark);
}

.compare-table thead th,
.compare-table .compare-corner {
    width: auto;
    vertical-align: bottom;
    border-bottom: 2px solid var(--hpr-line-e3def5);
}

.compare-table .compare-corner {
    width: 26%;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-site {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--hpr-purple-dark);
    font-weight: 800;
    font-size: 16px;
}

.compare-site-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.compare-table td.compare-win {
    background: rgba(34, 197, 94, 0.09);
}

.compare-table td.compare-win:not(:has(.compare-bar-value))::after,
.compare-table td.compare-win .compare-bar-value::after {
    content: "\2713";
    margin-left: 6px;
    font-weight: 900;
    color: var(--hpr-green);
}

.compare-row-overall td,
.compare-row-overall th {
    background: var(--hpr-bg);
}

.compare-score {
    font-size: 24px;
    font-weight: 900;
    color: var(--hpr-purple);
}

.compare-bar-value {
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 700;
}

.compare-table .score-breakdown-bar {
    display: block;
    margin: 0;
}

.compare-table td.compare-win .score-breakdown-bar-fill {
    background: var(--hpr-green);
}

.compare-table .score-breakdown-bar-fill {
    display: block;
}

.compare-row-categories td {
    font-size: 13px;
    line-height: 1.6;
}

.compare-table td a:not(.visit-site-btn) {
    color: var(--hpr-purple);
    font-weight: 600;
}

.compare-date {
    display: block;
    font-size: 12px;
    color: var(--hpr-text-light);
}

.compare-none {
    color: var(--hpr-text-light);
}

.compare-row-visit .visit-site-btn {
    white-space: normal;
    text-align: center;
}

.compare-footnote {
    margin-top: -20px; /* sits under the table, inside .main-content's 30px gap */
}

/* Editorial text for a comparison (Porn Reviews > Comparisons). */
.compare-text {
    width: 100%;
    max-width: 820px;
    align-self: center;
}

.compare-text p,
.compare-text ul,
.compare-text ol {
    margin: 0 0 14px;
}

.compare-text ul,
.compare-text ol {
    padding-left: 22px;
}

.compare-text ul {
    list-style: disc;
}

.compare-text ol {
    list-style: decimal;
}

.compare-text li {
    margin-bottom: 6px;
}

.compare-text h2 {
    margin: 28px 0 10px;
}

.compare-text h2:first-child {
    margin-top: 0;
}

.compare-text h3 {
    margin: 18px 0 6px;
}

.compare-text-edit {
    margin-top: -20px;
    font-size: 13px;
}

.compare-text-edit a {
    color: var(--hpr-purple);
    text-decoration: underline;
}

.compare-popular h2 {
    margin-bottom: 12px;
    font-size: 20px;
    color: var(--hpr-purple-dark);
}

/* At most five rows: 5 x 2 on wider screens, 5 x 1 on phones. Each
   comparison stays on one line (cut with "…" if a name is very long). */
.compare-popular-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.compare-popular-list a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 12px 14px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e3def5);
    border-radius: var(--hpr-radius);
    font-weight: 700;
    color: var(--hpr-purple-dark);
}

/* "Compare {site}" box on a review */
.compare-box {
    margin-top: 16px;
    padding: 16px;
    background: var(--hpr-card);
    border-radius: var(--hpr-radius);
}

.compare-box-heading {
    margin-bottom: 10px;
    font-weight: 800;
    color: var(--hpr-purple-dark);
}

.compare-form--inline {
    margin: 0;
    padding: 0;
}

.compare-form--inline .compare-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.compare-form--inline .compare-field {
    flex-basis: 100%;
}

.compare-form--inline .compare-submit {
    width: 100%;
}

.compare-box-links {
    margin-top: 12px;
    font-size: 13px;
}

.compare-box-links li + li {
    margin-top: 6px;
}

.compare-box-links a {
    color: var(--hpr-purple);
    font-weight: 600;
}

@media (hover: hover) {
    .compare-field input:hover {
        border-color: #b9a7ef;
    }
    .compare-popular-list a:hover {
        border-color: #b9a7ef;
        color: var(--hpr-purple);
    }
    .compare-table td a:not(.visit-site-btn):hover,
    .compare-box-links a:hover,
    .compare-site:hover .compare-site-name {
        text-decoration: underline;
    }
}

@media (max-width: 600px) {
    .compare-field input {
        font-size: 16px; /* no iOS focus zoom */
    }
    .sort-bar .sort-link {
        padding: 8px 12px;
    }
    .deal-filter-select {
        padding: 8px 30px 8px 12px;
        background-position: right 12px center;
    }
    .compare-form-vs {
        display: none;
    }
    .compare-popular-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .compare-popular-list li:nth-child(n+6) {
        display: none;
    }
    .compare-popular-list a {
        padding: 10px 12px;
        font-size: 14px;
    }
    .compare-submit {
        width: 100%;
    }
    /* Each row: the label on its own line, then the two sites side by side. */
    .compare-table,
    .compare-table thead,
    .compare-table tbody {
        display: block;
    }
    .compare-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid var(--hpr-line-efecf8);
    }
    .compare-table tbody tr:last-child {
        border-bottom: 0;
    }
    .compare-table th,
    .compare-table td {
        padding: 8px 10px;
        border-bottom: 0;
    }
    .compare-table tbody th {
        grid-column: 1 / -1;
        width: auto;
        padding-bottom: 0;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .compare-table .compare-corner {
        display: none;
    }
    .compare-table thead th {
        width: auto;
        border-bottom: 0;
    }
    .compare-row-visit th {
        display: none;
    }
    .compare-site {
        font-size: 14px;
    }
    .compare-row-visit .visit-site-btn {
        width: 100%;
        padding: 3px 8px;
        letter-spacing: 0.04em;
    }
}

.rr-contact-grid,
.rr-site-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.rr-sites {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rr-site {
    margin: 0;
    padding: 14px 16px 4px;
    border: 1px solid var(--hpr-line-e3def5);
    border-radius: var(--hpr-radius);
    background: #fbfaff;
}

.rr-site legend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 6px;
    font-weight: 700;
    color: var(--hpr-purple-dark);
}

.rr-site-remove {
    padding: 2px 8px;
    border: 1px solid #f3c6d9;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-card);
    color: #be185d;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.rr-site-remove[hidden] {
    display: none;
}

.rr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rr-btn {
    padding: 10px 18px;
    border: 1px solid var(--hpr-line-d8d2f0);
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-bg);
    color: var(--hpr-purple-dark);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.rr-btn[hidden] {
    display: none;
}

.rr-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rr-actions .review-request-submit {
    margin-left: auto;
}

@media (hover: hover) {
    .rr-btn:not(:disabled):hover {
        background: rgba(124, 58, 237, 0.12);
        color: var(--hpr-purple);
    }
    .rr-site-remove:hover {
        background: #fdf2f8;
    }
}

@media (max-width: 600px) {
    .rr-contact-grid,
    .rr-site-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .rr-actions .review-request-submit {
        width: 100%;
        margin-left: 0;
    }
}

.form-hint {
    font-size: 12px;
    color: var(--hpr-text-light);
    margin: 0;
}

.review-request-submit {
    align-self: flex-start;
    background: var(--hpr-gradient);
    color: var(--hpr-white);
    border: none;
    border-radius: var(--hpr-radius-pill);
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
}

/* Honeypot: hidden from real visitors, left in the tab order for bots to fill in */
.hpr2026-hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.review-byline {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 30px 0;
    padding-top: 24px;
    border-top: 1px solid var(--hpr-line-e5e7eb);
    text-align: center;
}

.review-byline-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-byline-item strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.review-byline-item span {
    font-size: 15px;
    font-weight: 700;
    color: var(--hpr-purple);
}

/* ==========================================================================
   Reviewers: "About the reviewer" box, profile page, team page
   ========================================================================== */
.review-byline-item span a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.reviewer-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--hpr-gradient);
    color: var(--hpr-white);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.02em;
}

.reviewer-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 30px 0;
    padding: 18px 20px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
}

.reviewer-box-photo,
.reviewer-card-photo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

/* Soft backdrop behind photos with transparent backgrounds. */
.reviewer-box-photo,
.reviewer-card-photo,
.reviewer-hero-photo {
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #dfe6fb 100%);
}

.reviewer-box-photo img,
.reviewer-card-photo img,
.reviewer-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviewer-box-body {
    min-width: 0;
}

.reviewer-box-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
    margin: 0 0 2px;
}

.reviewer-box-date {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.reviewer-box-name {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
}

.reviewer-box-name a {
    color: var(--hpr-purple);
}

.reviewer-box-role {
    font-size: 13px;
    font-weight: 600;
    color: var(--hpr-text-light);
}

.reviewer-box-bio {
    font-size: 14px;
    line-height: 1.55;
    color: var(--hpr-text);
    margin: 0 0 8px;
}

.reviewer-box-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--hpr-purple);
}

.reviewer-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 28px;
    align-items: center;
    width: 100%;
}

.reviewer-hero-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.18);
}

.reviewer-hero-photo .reviewer-initials {
    font-size: 56px;
}

.reviewer-hero-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hpr-pink);
    margin: 0 0 4px;
}

.reviewer-hero-name {
    font-size: 34px;
    font-weight: 800;
    color: var(--hpr-text);
    margin: 0 0 6px;
}

.reviewer-hero-role {
    font-size: 15px;
    font-weight: 600;
    color: var(--hpr-text-light);
    margin: 0 0 12px;
}

.reviewer-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.reviewer-expertise li {
    padding: 4px 12px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-bg);
    color: var(--hpr-purple);
    font-size: 12px;
    font-weight: 700;
}

.reviewer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}

.reviewer-links a {
    font-size: 14px;
    font-weight: 700;
    color: var(--hpr-purple);
    text-decoration: underline;
}

.reviewer-bio {
    width: 100%;
}

.reviewer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0;
}

.reviewer-stats div {
    padding: 14px 16px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: 12px;
    text-align: center;
}

.reviewer-stats dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.reviewer-stats dd {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--hpr-purple);
}

.reviewer-top-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    font-size: 14px;
}

.reviewer-reviews {
    width: 100%;
}

.reviewer-reviews-title {
    font-size: 20px;
    color: var(--hpr-purple);
    margin: 0 0 16px;
}

.reviewer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

.reviewer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 16px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: 14px;
    text-align: center;
    color: var(--hpr-text);
}

.reviewer-card-photo {
    flex-basis: auto;
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
}

.reviewer-card-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--hpr-purple);
}

.reviewer-card-role,
.reviewer-card-count {
    font-size: 13px;
    color: var(--hpr-text-light);
}

.reviewer-card-bio {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
}

@media (hover: hover) {
    .reviewer-card:hover {
        border-color: var(--hpr-purple);
        box-shadow: 0 6px 16px rgba(124, 58, 237, 0.15);
    }
}

@media (max-width: 600px) {
    .reviewer-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
    }
    .reviewer-hero-photo {
        width: 140px;
        height: 140px;
    }
    .reviewer-expertise,
    .reviewer-links {
        justify-content: center;
    }
    .reviewer-hero-name {
        font-size: 28px;
    }
    .reviewer-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   Deal alerts (inc/deal-alerts.php): a box in the review sidebar, a banner
   on the Special Offers and Trial Deals pages
   ========================================================================== */
.deal-alert {
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: 12px;
    padding: 16px;
}

.deal-alert--banner {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 4px 20px;
    align-items: center;
    padding: 18px 22px;
    background: linear-gradient(135deg, #fdf2ff 0%, #eef4ff 100%);
}

.deal-alert--banner .deal-alert-title,
.deal-alert--banner .deal-alert-text {
    grid-column: 1;
}

.deal-alert--banner .deal-alert-form,
.deal-alert--banner .deal-alert-small,
.deal-alert--banner .deal-alert-message {
    grid-column: 2;
}

.deal-alert--banner .deal-alert-form {
    grid-row: 1 / span 2;
    align-self: end;
}

.deal-alert-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hpr-purple);
}

.deal-alert-text {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--hpr-text);
}

.deal-alert-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deal-alert-form input[type="email"] {
    flex: 1 1 160px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--hpr-line-d5dbef);
    border-radius: 10px;
    background: var(--hpr-card);
    font-size: 15px;
    color: var(--hpr-text);
}

.deal-alert-submit {
    flex: 0 0 auto;
}

.deal-alert-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.deal-alert-small {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--hpr-text-light);
}

.deal-alert-small a {
    color: inherit;
    text-decoration: underline;
}

.deal-alert-message {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.deal-alert-message--success {
    background: var(--hpr-success-bg);
    color: var(--hpr-green-800);
}

.deal-alert-message--error {
    background: var(--hpr-error-bg);
    color: var(--hpr-error-text);
}

@media (max-width: 700px) {
    .deal-alert--banner {
        grid-template-columns: 1fr;
    }
    .deal-alert--banner .deal-alert-title,
    .deal-alert--banner .deal-alert-text,
    .deal-alert--banner .deal-alert-form,
    .deal-alert--banner .deal-alert-small,
    .deal-alert--banner .deal-alert-message {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ==========================================================================
   Freshness badge (inc/link-checker.php): "✓ Link checked 3 days ago"
   ========================================================================== */
.freshness-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-success-bg);
    color: var(--hpr-green-700);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.freshness-badge--review {
    align-self: center;
    margin-top: -4px;
}

.freshness-badge--card {
    margin: 2px 0 6px;
    font-size: 11px;
    padding: 2px 8px;
}

/* ==========================================================================
   Share buttons (inc/share.php)
   ========================================================================== */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.share-buttons-label {
    margin-right: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--hpr-line-e3e0f0);
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-card);
    color: var(--hpr-purple);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.share-button[hidden] {
    display: none;
}

.share-button.is-copied {
    border-color: var(--hpr-green-600);
    color: var(--hpr-green-600);
}

.share-buttons-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--hpr-green-600);
}

@media (hover: hover) {
    .share-button:hover {
        background: var(--hpr-purple-fill);
        border-color: var(--hpr-purple);
        color: var(--hpr-white);
    }
}

.share-button:focus-visible {
    outline: 2px solid var(--hpr-purple);
    outline-offset: 2px;
}

/* QR code of the page (js/share.js): a small box over the page. The code
   stays black on white in dark mode, so every phone camera can read it. */
.share-qr {
    width: min(320px, calc(100% - 32px));
    padding: 20px;
    border: 0;
    border-radius: var(--hpr-radius);
    background: var(--hpr-card);
    color: var(--hpr-text);
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.share-qr::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.share-qr-heading {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hpr-purple-dark);
}

.share-qr-code {
    padding: 12px;
    border-radius: 8px;
    background: #ffffff;
    line-height: 0;
}

.share-qr-code svg {
    width: 100%;
    height: auto;
}

.share-qr-url {
    margin: 12px 0 16px;
    font-size: 12px;
    color: var(--hpr-text-light);
    overflow-wrap: anywhere;
}

.share-qr-close {
    padding: 8px 22px;
    border: 0;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.share-qr-close:focus-visible {
    outline: 2px solid var(--hpr-purple);
    outline-offset: 2px;
}

/* Under a list (categories, deals, Reviews A-Z, Find My Site results). */
.review-card-list ~ .share-buttons,
.pagination + .share-buttons,
.az-group + .share-buttons,
.finder-more + .share-buttons,
.finder-top + .share-buttons {
    margin: 20px 0 24px;
}

/* Porn star pages: under the photo and bio, full width. */
.model-hero + .share-buttons {
    margin: -8px 0 24px;
}

/* On comparisons the share bar sits under the table's footnote. */
.compare-footnote + .share-buttons {
    justify-content: center;
    margin: 0 0 24px;
}

/* ==========================================================================
   In-article "Join Now" CTA banner
   ========================================================================== */
.review-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 24px 28px;
    background: var(--hpr-gradient);
    border-radius: var(--hpr-radius);
    box-shadow: 0 8px 20px rgba(76, 29, 149, 0.18);
}

.review-cta-text {
    color: var(--hpr-white);
}

.review-cta-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.review-cta-heading {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

.review-cta-banner .visit-site-btn {
    flex-shrink: 0;
    padding: 14px 26px;
    font-size: 14px;
    background: var(--hpr-card);
    color: var(--hpr-purple-dark);
    text-shadow: none;
    border-color: rgba(255, 255, 255, 0.4);
}

/* "At a glance": the screenshot slider beside the deal panel, the score
   breakdown under both. Without screenshots the deal panel is on its own. */
.review-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.review-summary--media {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "media deal";
    gap: 20px;
}

.review-summary--media > .review-hero-media {
    grid-area: media;
}

.review-summary--media > .review-deal {
    grid-area: deal;
}

/* Deal panel: "EXCLUSIVE DEAL", the price, the regular price with a red
   "SAVE $15 (50%)" tag, the period, and one big button. */
.review-deal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 24px;
    background: var(--hpr-bg);
    border-radius: 14px;
    text-align: center;
}

.review-deal-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.review-deal-price {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: linear-gradient(180deg, #ff5052 0%, #b23739 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.review-deal-price sup {
    position: relative;
    top: 0.1em;
    margin-left: 2px;
    font-size: 0.5em;
    vertical-align: top;
}

.review-deal-was {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
}

.review-deal-regular {
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--hpr-text-light);
    text-decoration-thickness: 2px;
}

.review-deal-save {
    padding: 3px 10px;
    border-radius: 6px;
    background: #e5383b;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.review-summary-period {
    margin: 0;
    font-size: 15px;
    color: var(--hpr-text-light);
}

.review-summary-period .price-box-plans-link {
    display: inline;
    margin: 0 0 0 8px;
    font-size: 13px;
}

.review-visit-btn {
    text-align: center;
    padding: 12px 28px;
    font-size: 15px;
}

/* The deal panel's button: full width, big, like the review cards' one. */
.review-deal .review-visit-btn {
    width: 100%;
    margin-top: 8px;
    padding: 16px 20px;
    border: 0;
    border-radius: 12px;
    font-size: 17px;
    letter-spacing: 0.12em;
    white-space: normal; /* Long labels wrap instead of overflowing. */
    box-shadow: 0 8px 20px rgba(91, 92, 246, 0.25);
}

/* The slider: one screenshot at a time, swipeable (scroll snap), with
   arrows, dots and a counter when there are several. */
.review-hero-media {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--hpr-radius);
    background: var(--hpr-card);
}

.review-hero-track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.review-hero-track::-webkit-scrollbar {
    display: none;
}

.review-hero-slide {
    flex: 0 0 100%;
    aspect-ratio: 16 / 11;
    scroll-snap-align: start;
}

.review-hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* The top of a site screenshot says the most. */
    cursor: zoom-in;
}

.review-hero-arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 0 3px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--hpr-purple-dark);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.review-hero-arrow--prev {
    left: 10px;
}

.review-hero-arrow--next {
    right: 10px;
}

.review-hero-count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: var(--hpr-radius-pill);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.review-hero-dots {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.review-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    pointer-events: auto;
}

.review-hero-dot.is-active {
    width: 22px;
    border-radius: var(--hpr-radius-pill);
    background: #ffffff;
}

@media (hover: hover) {
    .review-hero-arrow:hover {
        background: #ffffff;
        color: var(--hpr-purple);
    }
}

/* "Redeem Now" (discounted sites): a band of light sweeps across the button
   every few seconds. */
.review-visit-btn--shimmer {
    position: relative;
    overflow: hidden;
}

.review-visit-btn--shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: hpr-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hpr-shimmer {
    0% { left: -60%; }
    45%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .review-visit-btn--shimmer::after {
        display: none;
    }
}

/* The breakdown: label, score and bar per criterion, three to a row. */
.score-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 40px;
    padding: 22px 28px;
    background: var(--hpr-bg);
    border-radius: var(--hpr-radius);
    margin-bottom: 24px;
}

.score-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 7px;
}

.score-breakdown-value {
    font-weight: 700;
    color: var(--hpr-purple-dark);
    white-space: nowrap;
}

.score-breakdown-bar {
    background: var(--hpr-card);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

/* On review pages the bars are a little thicker (the Compare table keeps 6px). */
.score-breakdown .score-breakdown-bar {
    height: 8px;
    border-radius: 4px;
}

.score-breakdown-bar-fill {
    background: var(--hpr-purple-fill);
    height: 100%;
}

.scoring-criteria-link {
    grid-column: 1 / -1;
    justify-self: end;
    font-size: 12px;
    font-weight: 700;
    color: var(--hpr-purple);
    text-decoration: underline;
}

/* Deal alert and Compare side by side, after the Site Facts prices. */
.review-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0;
}

.review-tools > .deal-alert,
.review-tools > .compare-box {
    margin: 0;
    background: var(--hpr-bg);
    border: 0;
    border-radius: var(--hpr-radius);
    padding: 18px 20px;
}

/* Cam sites get no deal alert (free to join): Compare takes the full row. */
.review-tools > :only-child {
    grid-column: 1 / -1;
}

/* Compare: the site field and the button on one row, like the alert form. */
.review-tools .compare-form--inline {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    background: none;
}

.review-tools .compare-form--inline .compare-field {
    flex: 1 1 auto;
    min-width: 0;
}

.review-tools .compare-form--inline .compare-submit {
    width: auto;
}

.review-tools .compare-form--inline .compare-field input {
    height: 100%;
}

/* Gallery lightbox overlay */
.gallery-slider-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.gallery-slider-overlay.is-open {
    display: flex;
}

.gallery-slider-overlay .slider-image {
    max-width: 80%;
    max-height: 80%;
}

.gallery-slider-overlay .slider-btn {
    background: none;
    border: none;
    color: var(--hpr-white);
    font-size: 40px;
    padding: 20px;
}

.gallery-slider-overlay .slider-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
}

.gallery-slider-overlay .slider-counter {
    position: absolute;
    bottom: 20px;
    color: var(--hpr-white);
    font-size: 13px;
}

/* User reviews / comments */
.user-reviews-section {
    margin-top: 40px;
}

.user-reviews-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.user-reviews-heading h2 {
    color: var(--hpr-purple);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.user-reviews-heading p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.user-review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.user-review-card {
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: var(--hpr-radius);
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
    padding: 16px;
    font-size: 13px;
}

.user-review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
}

.user-review-score {
    color: var(--hpr-purple);
    white-space: nowrap;
}

.user-review-date {
    display: block;
    color: var(--hpr-text-light);
    font-size: 11px;
    margin: 4px 0 8px;
}

/* Blog post and page comments (comments.php): the review comment cards,
   one per row, replies indented under their parent. */
.post-comment-list,
.post-comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-comment-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.post-comment-list .children {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 0 28px;
    padding-left: 14px;
    border-left: 3px solid var(--hpr-line-e6e1f5);
}

.post-comment .user-review-card {
    font-size: 14px;
}

.post-comment .user-review-date {
    text-decoration: none;
}

.post-comment .user-review-date:hover {
    color: var(--hpr-purple);
}

.post-comment .user-review-text p {
    margin: 0 0 8px;
    line-height: 1.6;
}

.post-comment .user-review-text p:last-child {
    margin-bottom: 0;
}

.post-comment-moderation {
    font-size: 12px;
    font-style: italic;
    color: var(--hpr-text-light);
    margin: 0 0 6px;
}

.post-comment-reply {
    margin-top: 10px;
}

.post-comment-reply a {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hpr-purple);
}

.post-comment-reply a:hover {
    color: var(--hpr-purple-dark);
}

.comment-form-fields.comment-form-fields--single {
    grid-template-columns: minmax(0, 1fr);
}

.post-comments .comment-reply-title small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    text-transform: none;
}

.post-comments .comment-reply-title small a {
    color: var(--hpr-text-light);
    text-decoration: underline;
}

.post-comments-closed {
    color: var(--hpr-text-light);
    font-size: 13px;
}

.comment-form-section {
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: var(--hpr-radius);
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
    padding: 28px 24px;
}

.comment-sent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: var(--hpr-radius);
    background: #ecfdf3;
    border: 1px solid #a7e3bf;
    color: #14532d;
    font-size: 13px;
    line-height: 1.55;
    scroll-margin-top: 90px;
}

.comment-sent[hidden] {
    display: none;
}

.comment-sent svg {
    flex: none;
    color: #16a34a;
}

.comment-sent p {
    margin: 0;
}

.comment-sent .comment-sent-title {
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 2px;
}

:root[data-theme="dark"] .comment-sent {
    background: #173427;
    border-color: #2f6b4b;
    color: #d5f5e3;
}

:root[data-theme="dark"] .comment-sent svg {
    color: #4ade80;
}

.comment-form-section h3 {
    text-align: center;
    color: var(--hpr-purple);
    font-size: 19px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.comment-form-instructions {
    text-align: center;
    color: var(--hpr-text-light);
    font-size: 12px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 20px;
}

.comment-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.comment-form-row,
.comment-form-comment {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    font-size: 13px;
}

.comment-form-row label,
.comment-form-comment label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
    margin-bottom: 6px;
}

.comment-form-row input,
.comment-form-row select,
.comment-form-comment textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: var(--hpr-radius);
    border: 1px solid var(--hpr-line-d1d5db);
    font: inherit;
    background: var(--hpr-card);
}

.comment-form-legal {
    font-size: 11px;
    color: var(--hpr-text-light);
    line-height: 1.5;
    margin-bottom: 16px;
}

.comment-form-section .visit-site-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 14px;
}

/*
 * Core comment_form() fields used as-is on blog posts (single.php), plus the
 * notes/consent rows both comment forms share.
 */
.comment-reply-title {
    font-size: 20px;
    margin-bottom: 6px;
}

.comment-notes {
    font-size: 13px;
    color: var(--hpr-text-light);
    line-height: 1.5;
    margin-bottom: 14px;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    font-size: 13px;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
    margin-bottom: 6px;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    padding: 12px 14px;
    border-radius: var(--hpr-radius);
    border: 1px solid var(--hpr-line-d1d5db);
    font: inherit;
    background: var(--hpr-card);
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--hpr-text-light);
    line-height: 1.4;
    margin-bottom: 16px;
}

.comment-form-cookies-consent input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
}

.comment-form input.submit {
    padding: 12px 24px;
    background: var(--hpr-cta-gradient) border-box;
    border: 4px solid transparent; /* Keeps the button's size; the gradient runs under it. */
    border-radius: 10px;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hpr-white);
    cursor: pointer;
}

/* Similar sites */
.similar-sites {
    margin-top: 40px;
}

.similar-sites h2 {
    text-align: center;
    color: var(--hpr-purple);
    font-size: 18px;
    margin-bottom: 20px;
}

.similar-sites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.similar-site-card {
    text-align: center;
}

.similar-site-card img,
.similar-site-card .review-card-thumb-placeholder {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--hpr-radius);
    margin-bottom: 8px;
}

.similar-site-name {
    font-weight: 700;
    font-size: 14px;
}

/* ==========================================================================
   Models directory + profile
   ========================================================================== */
.models-header {
    text-align: center;
    margin-bottom: 28px;
}

.models-header .page-title {
    color: var(--hpr-purple);
    text-transform: uppercase;
}

.models-header .page-intro-lead {
    color: var(--hpr-purple);
    font-weight: 600;
    margin-bottom: 12px;
}

.models-header .page-intro {
    max-width: 760px;
    margin: 0 auto;
}

.star-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 20px;
}

.star-search input[type="search"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid var(--hpr-line-d5dbef);
    border-radius: 10px;
    background: var(--hpr-card);
    font-size: 15px;
    color: var(--hpr-text);
}

.star-search .deal-filter-select {
    flex: 0 1 180px;
    min-width: 0;
}

.star-search-submit {
    flex: 0 0 auto;
}

/* Too narrow for one row: keep Search next to the name box and put the
   dropdowns on their own row below, instead of Search alone on a line. */
@media (max-width: 1100px) {
    .star-search input[type="search"] {
        flex-basis: calc(100% - 120px);
    }

    .star-search-submit {
        order: 1;
    }

    .star-search .deal-filter-select {
        order: 2;
        flex: 1 1 140px;
    }
}

.star-search-summary,
.star-search-empty {
    text-align: center;
    font-weight: 600;
    color: var(--hpr-text);
    margin: 0 0 20px;
}

.star-search-clear {
    display: inline-block;
    white-space: nowrap;
    margin-left: 10px;
    font-weight: 400;
    color: var(--hpr-purple);
    text-decoration: underline;
}

.model-card-name .country-flag {
    width: 16px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -1px;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.model-card {
    text-align: center;
}

/* Default porn-star silhouette: never cropped; the box behind it matches
   the SVG's own background so any letterboxing blends in. */
.model-card-thumb img.porn-star-default-photo,
.model-hero-photo img.porn-star-default-photo {
    object-fit: contain;
    background: linear-gradient(135deg, #f3f0ff 0%, #e4dcfb 100%);
}

.model-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--hpr-radius);
    overflow: hidden;
    background: var(--hpr-bg);
    margin-bottom: 8px;
}

.model-card-thumb img,
.model-card-thumb .review-card-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Odd-shaped photos are cropped from the middle. */
}

.model-card-name {
    display: block;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    font-size: 13px;
}

.model-hero {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.model-hero-photo img,
.model-hero-photo .review-card-thumb-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center; /* Odd-shaped photos are cropped from the middle. */
    border-radius: var(--hpr-radius);
}

.model-hero-label {
    color: var(--hpr-purple);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.model-hero-name {
    color: var(--hpr-pink);
    font-size: 28px;
    margin-bottom: 14px;
}

.model-profile {
    background: var(--hpr-bg);
    border-radius: var(--hpr-radius);
    padding: 20px;
}

.similar-stars {
    margin-top: 40px;
}

.similar-stars-title {
    text-align: center;
    color: var(--hpr-purple);
    font-size: 18px;
    margin-bottom: 20px;
}

.country-flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    object-fit: cover;
}

.model-profile-title {
    margin-bottom: 16px;
}

.model-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.model-profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hpr-card);
    border-radius: var(--hpr-radius);
    padding: 10px 14px;
    font-size: 13px;
}

.model-profile-row--wide {
    grid-column: 1 / -1;
}

.model-profile-label {
    font-weight: 700;
    color: var(--hpr-purple-dark);
    white-space: nowrap;
}

/* ==========================================================================
   Search — no results state
   ========================================================================== */
.back-to-home-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--hpr-purple);
}

.search-empty-state {
    text-align: center;
    margin-bottom: 28px;
}

.search-empty-heading {
    color: var(--hpr-pink);
    font-size: 22px;
    margin-bottom: 10px;
}

.search-empty-subtitle {
    color: var(--hpr-text-light);
    font-size: 14px;
}

/* ==========================================================================
   Review Scoring static page
   ========================================================================== */
.scoring-page-title {
    text-align: center;
    color: var(--hpr-purple);
    font-size: 22px;
    margin-bottom: 24px;
}

.scoring-section {
    margin-bottom: 32px;
}

.scoring-section h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--hpr-text);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--hpr-bg);
}

.scoring-section p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--hpr-text);
    margin-bottom: 10px;
}

.criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.criteria-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hpr-bg);
    border-radius: 8px;
    padding: 10px 14px;
}

.criteria-badge {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
    font-weight: 700;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.criteria-desc {
    font-size: 13px;
    color: var(--hpr-text);
}

/* ==========================================================================
   Categories index page
   ========================================================================== */
.category-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.category-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--hpr-bg);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hpr-purple-dark);
}

.category-pill:hover {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

.category-pill-count {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
}

.category-pill:hover .category-pill-count {
    background: var(--hpr-card);
    color: var(--hpr-purple);
}

.categories-section h2 {
    margin-bottom: 10px;
    font-size: 20px;
    color: var(--hpr-purple-dark);
}

.categories-section > p {
    margin-bottom: 14px;
    line-height: 1.6;
}

.categories-section p a {
    color: var(--hpr-purple);
    font-weight: 600;
}

/* Categories page: biggest categories and their top-rated site */
.category-top-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.category-top-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e3def5);
    border-radius: var(--hpr-radius);
    font-size: 13px;
}

.category-top-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--hpr-purple-dark);
}

.category-top-count {
    color: var(--hpr-text-light);
}

.category-top-site a {
    color: var(--hpr-purple);
    font-weight: 600;
}

.category-top-score {
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-green);
    color: var(--hpr-white);
    font-size: 11px;
    font-weight: 700;
}

@media (hover: hover) {
    .categories-section p a:hover,
    .category-top-site a:hover,
    .category-top-name:hover {
        text-decoration: underline;
    }
}

/* ==========================================================================
   Reviews A-Z page
   ========================================================================== */
.az-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.az-jump-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--hpr-bg);
    color: var(--hpr-purple-dark);
    font-size: 13px;
    font-weight: 600;
}

.az-jump-link:hover {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

.az-jump-link-disabled {
    color: var(--hpr-text);
    opacity: 0.35;
}

.az-group {
    margin-bottom: 24px;
}

.az-group-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    border-bottom: 1px solid var(--hpr-bg);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.az-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.az-review-item {
    padding: 6px 0;
    font-size: 14px;
}

.az-intro {
    margin-bottom: 20px;
}

.az-intro p {
    margin: 0 0 12px;
}

.category-glance.az-glance {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.az-score {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--hpr-bg);
    color: var(--hpr-purple-dark);
    font-size: 12px;
    font-weight: 700;
}

.az-more {
    margin-top: 32px;
    border-top: 1px solid var(--hpr-bg);
    padding-top: 24px;
}

.az-section {
    margin-bottom: 28px;
}

.az-section h2 {
    margin-bottom: 12px;
    font-size: 20px;
    color: var(--hpr-purple-dark);
}

.az-section p {
    margin: 0 0 12px;
}

.az-ranked {
    margin: 0;
    padding-left: 22px;
    columns: 2 220px;
    column-gap: 32px;
}

.az-ranked li {
    padding: 4px 0;
    break-inside: avoid;
}

.az-deals {
    list-style: none;
    padding-left: 0;
}

.az-deal {
    margin-left: 6px;
    color: var(--hpr-red);
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================================
   Welcome box
   ========================================================================== */
.welcome-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 0 30px;
    background: radial-gradient(ellipse 60.18% 681.91% at -2.2% 225%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%), #000000;
    border-radius: 15px;
}

.welcome-box-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 28px 10px;
    flex: 1;
}

.welcome-box .page-title {
    display: flex;
    align-items: center;
    align-self: stretch;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: #ffffff;
}

.welcome-box .page-intro {
    display: flex;
    align-items: center;
    align-self: stretch;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.31;
    text-align: justify;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.welcome-box-mascot-wrap {
    position: relative;
    width: 180px;
    height: 345px;
    flex-shrink: 0;
    align-self: flex-end;
}

.welcome-box-mascot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

/* "Read More" under the intro, phones only (js/welcome-read-more.js). */
.welcome-read-more {
    display: none;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    margin-top: -6px;
    padding: 4px 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--hpr-white);
    cursor: pointer;
}

.welcome-read-more svg {
    transition: transform 0.2s ease;
}

.welcome-box-text.is-expanded .welcome-read-more svg {
    transform: rotate(180deg);
}

.welcome-read-more:focus-visible {
    outline: 2px solid var(--hpr-white);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Small phones: a narrower Harry leaves room for "HonestPornReviews.com".
   (Extra .welcome-box so this wins over the 600px rules further down.) */
@media (max-width: 360px) {
    .welcome-box .welcome-box-mascot-wrap {
        flex-basis: 96px;
        width: 96px;
    }
}

/* ==========================================================================
   Featured Site of the Week (template-parts/featured-banner.php): the
   screenshot with a ribbon beside name, score, snippet, pros, price and
   buttons; stacked on phones.
   ========================================================================== */
.sotw {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e3e0f0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(80, 60, 160, 0.10);
}

.sotw--no-image {
    grid-template-columns: 1fr;
}

.sotw a.sotw-media {
    position: relative;
    display: block;
    min-height: 260px;
    background: var(--hpr-navy);
}

.sotw-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.sotw-ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-gradient);
    color: var(--hpr-white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sotw-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    min-width: 0;
}

.sotw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sotw-heading {
    min-width: 0;
}

.sotw-title {
    margin: 0 0 4px;
    font-size: 26px;
    line-height: 1.2;
}

.sotw-title a {
    color: var(--hpr-ink);
}

.sotw-meta {
    margin: 0;
    font-size: 13px;
    color: var(--hpr-text-light);
}

.sotw-score.review-card-score-container,
.sotw-score .review-card-score {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
}

.sotw-score .review-card-score-value {
    font-size: 26px;
}

.sotw-excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hpr-text);
}

.sotw-pros {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--hpr-text);
}

.sotw-pros li {
    display: flex;
    gap: 8px;
}

.sotw-check {
    flex-shrink: 0;
    color: var(--hpr-green-600);
    font-weight: 800;
}

/* Price and buttons at the bottom of the card, above a divider. */
.review-card-cta.sotw-cta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hpr-line-e3e0f0);
}

@media (hover: hover) {
    .sotw-title a:hover {
        color: var(--hpr-purple);
        text-decoration: underline;
    }
}

@media (max-width: 700px) {
    .sotw {
        grid-template-columns: minmax(0, 1fr);
    }
    .sotw a.sotw-media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    .sotw-body {
        padding: 18px;
    }
    .sotw-body > .review-card-footer {
        margin: auto -18px -18px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .sotw-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   "Best ... Porn Sites" ranking on review category pages
   ========================================================================== */
/* Landing pages (inc/landing-pages.php) */
/* "See the best X alternatives" / "See all X porn stars": a centred outline button under its section. */
.section-more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 10px 24px;
    border: 2px solid var(--hpr-purple);
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-card);
    color: var(--hpr-purple);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.section-more-link:hover,
.section-more-link:focus-visible {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25);
}

.alternatives-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.alternative {
    display: grid;
    grid-template-columns: 34px 150px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 16px;
    background: var(--hpr-card);
    border-radius: 14px;
}

.alternative-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hpr-gradient);
    color: var(--hpr-white);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alternative-thumb {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--hpr-bg);
}

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

.alternative-name {
    margin: 0 0 4px;
    font-size: 19px;
}

.alternative-name a {
    color: var(--hpr-purple-dark);
}

.alternative-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--hpr-text-light);
}

.alternative-save {
    color: var(--hpr-red);
    font-weight: 800;
}

.alternative-snippet {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
}

.alternative-shared {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--hpr-text-light);
}

.alternative-shared .category-pill {
    display: inline-flex;
    padding: 3px 10px;
    font-size: 12px;
}

.alternative-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}

.alternative-actions a:not(.visit-site-btn) {
    color: var(--hpr-purple);
    text-decoration: underline;
}

.alternative-score {
    min-width: 46px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--hpr-green);
    color: var(--hpr-white);
    font-weight: 800;
    font-size: 18px;
    text-align: center;
}

.star-countries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
}

.star-countries-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--hpr-text-light);
    margin-right: 4px;
}

.star-countries .category-pill {
    display: inline-flex;
    background: var(--hpr-card);
    padding: 5px 12px;
}

.star-countries .category-pill.is-current {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

/* These pills sit on white, so their hover must beat the white background
   set above (the generic .category-pill:hover only changes the text to white). */
.star-countries .category-pill:hover,
.star-countries .category-pill:focus-visible,
.alternative-shared .category-pill:hover,
.alternative-shared .category-pill:focus-visible,
.category-related-list .category-pill:hover,
.category-related-list .category-pill:focus-visible {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

.star-countries .category-pill.is-current:hover {
    background: var(--hpr-purple-dark-fill);
}

.star-countries .country-flag {
    width: 18px;
    height: 13px;
    margin-right: 6px;
}

.page-title .country-flag {
    width: 30px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -2px;
}

@media (max-width: 700px) {
    .alternative {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .alternative-thumb {
        display: none;
    }
}

/* Pros & Cons on reviews (inc/review-pros-cons.php) */
.review-pros-cons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px;
}

.review-pros-cons > div {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--hpr-card);
    border-top: 4px solid var(--hpr-green);
}

.review-pros-cons > .review-cons {
    border-top-color: var(--hpr-red);
}

.review-notes-title {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--hpr-purple-dark);
}

.review-pros-cons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.review-pros-cons li {
    position: relative;
    padding: 3px 0 3px 22px;
    line-height: 1.45;
}

.review-pros-cons li::before {
    position: absolute;
    left: 0;
    top: 3px;
    font-weight: 800;
}

.review-pros li::before {
    content: "\2713";
    color: var(--hpr-green);
}

.review-cons li::before {
    content: "\2715";
    color: var(--hpr-red);
}

.review-pros-cons > div:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .review-pros-cons {
        grid-template-columns: 1fr;
    }
}

/* Galleries (galleries.php, inc/galleries.php) */
.gallery-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

.gallery-category-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 10px 14px;
    background: var(--hpr-card);
    border-radius: 14px;
    color: var(--hpr-text);
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.gallery-category-tile:hover,
.gallery-category-tile:focus-visible {
    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.15);
}

.gallery-category-previews {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--hpr-bg);
}

.gallery-category-previews img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.gallery-category-name {
    font-weight: 800;
    color: var(--hpr-purple-dark);
}

.gallery-category-count {
    font-size: 13px;
    color: var(--hpr-text-light);
}

.gallery-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    width: 100%;
}

.gallery-page-item {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--hpr-bg);
}

.gallery-page-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.gallery-page-item:hover img,
.gallery-page-item:focus-visible img {
    transform: scale(1.04);
}

.gallery-page-back a {
    color: var(--hpr-purple);
    font-weight: 600;
}

@media (max-width: 600px) {
    .gallery-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .gallery-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Review category pages (inc/category-guide.php) */
.category-updated {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--hpr-text-light);
}

.category-glance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.category-glance-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--hpr-card);
    border-radius: 14px;
    min-width: 0;
}

.category-glance-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.category-glance-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--hpr-purple);
}

.category-glance-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--hpr-text-light);
}

.category-glance-site {
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.category-glance-site a {
    color: var(--hpr-purple-dark);
}

.category-compare,
.category-guide,
.category-faq,
.category-related {
    width: 100%;
}

.review-faq {
    margin: 28px 0 8px;
}

.site-facts {
    margin: 28px 0 8px;
}

.site-facts h2 {
    margin-bottom: 12px;
    font-size: 20px;
    color: var(--hpr-purple-dark);
}

.site-facts h2 + .site-plans-wrap,
.site-facts-list + h2 {
    margin-top: 0;
}

.site-facts-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin: 0 0 24px;
}

.site-fact {
    background: var(--hpr-bg);
    border-radius: var(--hpr-radius);
    padding: 10px 14px;
}

.site-fact dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.site-fact dd {
    margin: 2px 0 0;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    overflow-wrap: anywhere;
}

.site-plans-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.site-plans {
    width: 100%;
    border-collapse: collapse;
    background: var(--hpr-bg);
    border-radius: var(--hpr-radius);
    overflow: hidden;
    font-size: 15px;
}

.site-plans th,
.site-plans td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.site-plans thead th {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hpr-text-light);
}

.site-plans tbody th {
    color: var(--hpr-purple-dark);
}

.site-plans tbody tr:last-child th,
.site-plans tbody tr:last-child td {
    border-bottom: 0;
}

.site-cross-sell {
    margin: 0;
    padding: 12px 16px;
    border-left: 4px solid #f59e0b;
    border-radius: var(--hpr-radius);
    background: var(--hpr-warn-bg);
    line-height: 1.5;
}

.review-report {
    margin: 14px 0 0;
    font-size: 14px;
}

.review-report summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hpr-text-light);
    cursor: pointer;
    list-style: none;
}

.review-report summary::-webkit-details-marker {
    display: none;
}

.review-report summary::before {
    content: "⚑";
}

.review-report summary:hover,
.review-report[open] summary {
    color: var(--hpr-purple-dark);
}

.review-report-form {
    display: grid;
    gap: 8px;
    max-width: 520px;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--hpr-bg);
    border-radius: var(--hpr-radius);
}

.review-report-form fieldset {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.review-report-form legend,
.review-report-label {
    font-weight: 700;
    color: var(--hpr-purple-dark);
    margin-bottom: 2px;
}

.review-report-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.review-report-form textarea,
.review-report-form input[type="email"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    font: inherit;
    background: var(--hpr-card);
}

.review-report-submit {
    justify-self: start;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--hpr-purple-fill);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.review-report-submit:hover {
    background: var(--hpr-purple-dark-fill);
}

.review-report-message {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: var(--hpr-radius);
    background: var(--hpr-success-bg);
    color: var(--hpr-green-800);
}

.review-report-message--error {
    background: var(--hpr-error-bg);
    color: var(--hpr-error-text);
}

.price-box-plans-link {
    display: block;
    margin: -4px 0 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--hpr-purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.review-faq .category-faq-item {
    background: var(--hpr-bg);
}

.category-compare h2,
.category-faq h2,
.review-faq h2,
.category-related h2 {
    margin-bottom: 12px;
    font-size: 20px;
    color: var(--hpr-purple-dark);
}

.category-guide p,
.category-guide ul,
.category-guide ol {
    margin: 0 0 14px;
}

.category-guide ul {
    list-style: disc;
    padding-left: 22px;
}

.category-guide h2 {
    margin: 24px 0 10px;
}

.category-faq-item {
    background: var(--hpr-card);
    border-radius: var(--hpr-radius);
    margin-bottom: 8px;
    padding: 0 16px;
}

.category-faq-item summary {
    padding: 13px 0;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    cursor: pointer;
}

.category-faq-item p {
    margin: 0;
    padding: 0 0 14px;
    line-height: 1.6;
}

.category-faq-item a,
.category-guide a {
    color: var(--hpr-purple);
    text-decoration: underline;
}

.category-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.category-related-list .category-pill {
    display: inline-flex;
    background: var(--hpr-card);
}

@media (max-width: 900px) {
    .category-glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.best-sites {
    background: var(--hpr-card);
    border-radius: 14px;
    padding: 20px 22px 12px;
    margin-bottom: 24px;
}

.best-sites-title {
    font-size: 20px;
    color: var(--hpr-purple);
    margin: 0 0 10px;
}

.best-sites-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.best-sites-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--hpr-line-eef0f6);
}

.best-sites-item:first-child {
    border-top: 0;
}

.best-sites-rank {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hpr-gradient);
    color: var(--hpr-white);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.best-sites-thumb {
    flex: 0 0 60px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #eef0f6;
}

.best-sites-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.best-sites-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    color: var(--hpr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.best-sites-save {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    color: #d93d3f;
    letter-spacing: 0.04em;
}

.best-sites-score {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--hpr-gold);
    color: #3d2800;
    font-weight: 900;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 400px) {
    .best-sites {
        padding: 16px 14px 8px;
    }
    .best-sites-thumb {
        display: none;
    }
}

/* ==========================================================================
   Reviews by Category tiles
   ========================================================================== */
.category-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-tile {
    display: block;
    text-align: center;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: var(--hpr-radius);
    padding: 12px;
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
}

.category-tile-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--hpr-radius);
    overflow: hidden;
    background: var(--hpr-bg);
    margin-bottom: 8px;
}

.category-tile-image img,
.category-tile-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-tile-name {
    display: block;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    font-size: 14px;
}

.category-tile-count {
    display: block;
    color: var(--hpr-text-light);
    font-size: 12px;
}

/* ==========================================================================
   Friend Sites grid
   ========================================================================== */
.friend-sites-group-title {
    margin: 28px 0 14px;
}

.friend-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.friend-site-tile {
    display: block;
    text-align: center;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: var(--hpr-radius);
    padding: 12px;
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
}

.friend-site-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hpr-bg);
    border-radius: var(--hpr-radius);
    overflow: hidden;
}

.friend-site-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.friend-site-logo-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hpr-gradient);
    color: var(--hpr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.friend-site-name {
    display: block;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    font-size: 13px;
    line-height: 1.3;
}

/* Friend Sites cards with a blurb: wider, the text under the name. */
.friend-sites-grid:has(.friend-site-blurb) {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.friend-site-blurb {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--hpr-text-light);
}

.webmasters-about p {
    margin: 0 0 14px;
    line-height: 1.65;
}

.link-to-us-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 480px;
    margin: 0;
    padding: 24px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: var(--hpr-radius);
    box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05);
    text-align: center;
}

.link-to-us-box p {
    margin: 0;
    font-size: 14px;
    color: var(--hpr-text);
}

.link-to-us-preview img {
    display: block;
    max-width: 100%;
    height: auto;
}

.link-to-us-code {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--hpr-bg);
    border: 1px solid var(--hpr-line-ece9f5);
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--hpr-text);
    word-break: break-all;
    resize: vertical;
}

/* ==========================================================================
   View All Reviews link
   ========================================================================== */
.view-all-wrap {
    text-align: center;
    margin-top: 20px;
}

.view-all-link {
    display: inline-block;
    padding: 10px 28px;
    border-radius: var(--hpr-radius-pill);
    background: var(--hpr-card);
    border: 2px solid var(--hpr-purple);
    color: var(--hpr-purple);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}

.view-all-link:hover {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-accordion {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--hpr-line-e5e7eb);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 4px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--hpr-purple-dark);
    cursor: pointer;
}

.faq-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hpr-bg);
    color: var(--hpr-purple);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-question-text {
    flex: 1;
}

.faq-toggle-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hpr-bg);
    color: var(--hpr-purple);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-item.active .faq-toggle-icon {
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
    transform: rotate(45deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease;
}

.faq-answer p {
    min-height: 0;
    overflow: hidden;
    padding: 0 4px 0 44px;
    color: var(--hpr-text-light);
    font-size: 13px;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-answer p {
    padding-bottom: 16px;
}

/* ==========================================================================
   Hover & focus states
   Hover styles live in (hover: hover) so touch screens don't get stuck
   hover states after a tap; :focus-visible mirrors them for keyboards.
   ========================================================================== */
.visit-site-btn,
.comment-form input.submit,
.review-request-submit,
.similar-site-card,
.friend-site-tile,
.category-tile,
.sidebar-left .socials a,
.review-card-price--link,
.price-box--link {
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sort-link,
.deal-filter-select,
.about-review-links li a,
.pagination a,
.editors-pick-arrow,
.editors-pick-dot,
.faq-question,
.hpr-search-form .search-input-wrapper,
.hpr-search-form .search-submit svg,
.editors-pick-visit-btn svg,
.sidebar-left .top-review-item,
.sidebar-left .widget ul li,
.sidebar-left .top-review-item a,
.sidebar-left .widget ul li a,
.site-footer .footer-links a,
.site-footer .footer-legal a,
.review-card-title a,
.best-sites-name,
.blog-card-title a,
.editors-pick-title a,
.model-card-name,
.az-review-item a,
.scoring-criteria-link,
.back-to-home-link,
.entry-content a:not([class]):not(ul[class] a):not(ol[class] a),
.faq-answer a,
.link-to-us-preview a,
.review-request-form input,
.review-request-form select,
.review-request-form textarea,
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form select,
.comment-form textarea {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, text-decoration-color 0.18s ease;
}

.review-card-thumb img,
.editors-pick-thumb img,
.model-card-thumb img,
.blog-card-thumb img,
.similar-site-card img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Links inside prose read as links even before hover. Links in styled
   (classed) lists, e.g. the About page's review pills, keep their own look. */
.entry-content a:not([class]):not(ul[class] a):not(ol[class] a),
.faq-answer a {
    color: var(--hpr-purple);
    text-decoration: underline;
    text-decoration-color: rgba(124, 58, 237, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-card-thumb {
    border-radius: var(--hpr-radius);
    overflow: hidden;
    width: fit-content;
}

@media (hover: hover) {
    /* Gradient CTAs: a small lift + grow and a soft glow. */
    .visit-site-btn:hover,
    .comment-form input.submit:hover,
    .review-request-submit:hover {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 6px 16px rgba(124, 58, 237, 0.28);
        filter: brightness(1.06) saturate(1.1);
    }
    .editors-pick-visit-btn:hover svg {
        transform: translate(2px, -2px);
    }
    /* The Join banner is one big link; only its white button reacts. */
    .review-cta-banner .visit-site-btn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        filter: none;
    }

    /* Sale price boxes link to the site too. */
    .review-card-price--link:hover {
        transform: translateY(-2px);
        box-shadow: 9.12px 14px 18px rgba(0, 0, 0, 0.16);
    }
    .price-box--link:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
    }

    /* Tabs and pagination */
    .sort-link:hover {
        background: rgba(124, 58, 237, 0.12);
        color: var(--hpr-purple);
    }
    .sort-link.active:hover {
        background: var(--hpr-purple-dark-fill);
        color: var(--hpr-white);
    }
    .deal-filter-select:hover {
        background-color: rgba(124, 58, 237, 0.12);
        color: var(--hpr-purple);
    }
    .deal-filter.is-active .deal-filter-select:hover {
        background-color: var(--hpr-purple-dark-fill);
        color: var(--hpr-white);
    }
    .pagination a:hover {
        background: var(--hpr-purple-fill);
        color: var(--hpr-white);
    }

    /* Icon buttons */
    .sidebar-left .socials a:hover {
        background: var(--hpr-gradient);
        color: var(--hpr-white);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
    }
    .editors-pick-arrow:hover {
        background: rgba(236, 72, 153, 0.1);
        border-radius: 50%;
    }
    .editors-pick-dot:not(.is-active):hover {
        background-color: #b9aee8;
    }
    .hpr-search-form .search-input-wrapper:hover {
        border-color: rgba(255, 255, 255, 0.45);
    }
    .hpr-search-form .search-submit:hover svg {
        transform: scale(1.15);
    }

    /* Sidebar lists: tint the row, color the link. */
    .sidebar-left .top-review-item:has(> a:hover),
    .sidebar-left .widget ul li:has(> a:hover) {
        background: rgba(124, 58, 237, 0.06);
    }
    .sidebar-left .top-review-item a:hover,
    .sidebar-left .widget ul li a:hover {
        color: var(--hpr-purple);
    }

    /* Footer (white text on blue): shift to the badges' deep blue. */
    .site-footer .footer-links a:hover,
    .site-footer .footer-legal a:hover {
        color: rgba(45, 84, 125, 0.95);
    }

    /* Text links */
    .review-card-title a:hover,
    .best-sites-name:hover,
    .blog-card-title a:hover,
    .editors-pick-title a:hover,
    .model-card-name:hover,
    .az-review-item a:hover,
    .back-to-home-link:hover,
    .faq-question:hover {
        color: var(--hpr-purple);
    }
    .scoring-criteria-link:hover {
        color: var(--hpr-purple-dark);
    }
    .entry-content a:not([class]):not(ul[class] a):not(ol[class] a):hover,
    .faq-answer a:hover {
        color: var(--hpr-purple-dark);
        text-decoration-color: currentColor;
    }

    /* Image links: gentle zoom inside their frames. */
    .review-card-thumb a:hover img,
    .editors-pick-thumb a:hover img,
    .model-card-thumb:hover img,
    .blog-card-thumb a:hover img {
        transform: scale(1.05);
    }
    .link-to-us-preview a:hover {
        opacity: 0.85;
    }

    /* Tiles and cards: lift. */
    .friend-site-tile:hover,
    .category-tile:hover {
        transform: translateY(-3px);
        border-color: rgba(124, 58, 237, 0.3);
        box-shadow: 0 8px 20px rgba(76, 29, 149, 0.12);
    }
    .similar-site-card:hover {
        transform: translateY(-3px);
        color: var(--hpr-purple);
    }
    .similar-site-card:hover img {
        filter: brightness(1.05);
        box-shadow: 0 8px 20px rgba(76, 29, 149, 0.15);
    }

    /* Form fields */
    .review-request-form input:hover,
    .review-request-form select:hover,
    .review-request-form textarea:hover,
    .comment-form input:not([type="checkbox"]):not([type="submit"]):hover,
    .comment-form select:hover,
    .comment-form textarea:hover {
        border-color: #b9a7ef;
    }
}

a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
select:focus-visible {
    outline: 2px solid var(--hpr-purple);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
    .visit-site-btn:hover,
    .comment-form input.submit:hover,
    .review-request-submit:hover,
    .review-card-price--link:hover,
    .price-box--link:hover,
    .sidebar-left .socials a:hover,
    .friend-site-tile:hover,
    .category-tile:hover,
    .similar-site-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* With the 304px sidebar showing, the main column is narrow: two criteria
   to a row in the score breakdown. */
@media (max-width: 1100px) {
    .score-breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .site-container {
        grid-template-columns: 1fr;
    }
    .breadcrumbs {
        padding: 0 14px;
    }
    .sidebar-left {
        display: none;
    }
    .model-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .similar-stars .model-card:nth-child(n+10) {
        display: none;
    }
    .category-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /*
     * At this width the primary nav links already wrap to 2 rows, and the
     * full 999px pill radius turns that wrapped block into a distorted
     * oval rather than a menu — tone it down to a normal rounded rect.
     */
    .header-hero-nav {
        gap: 12px;
    }
    .nav-menu ul {
        gap: 8px;
    }
}

/*
 * Keep the homepage heading on one line above phone width. The text column's
 * width varies with the sidebar/mascot, so the font scales with the column
 * (cqi) and is capped at the 38px design size.
 */
@media (min-width: 601px) {
    .welcome-box-text {
        container-type: inline-size;
    }
    .welcome-box .page-title {
        white-space: nowrap;
        font-size: min(38px, 4.8cqi);
    }
}

@media (max-width: 600px) {
    /* Review header: the score beside the title, the tags under both;
       the slider over the deal panel; one criterion per row; Deal alert
       over Compare. */
    .review-hero {
        grid-template-areas: "title score" "tags tags";
        align-items: center;
    }
    .review-hero .page-title {
        font-size: 30px;
    }
    .review-hero-score {
        gap: 8px;
    }
    .review-hero-score .review-card-score-label {
        font-size: 12px;
    }
    .review-hero-score .review-card-score {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }
    .review-summary--media {
        grid-template-columns: 1fr;
        grid-template-areas: "media" "deal";
        gap: 16px;
    }
    .review-deal {
        padding: 24px 18px;
    }
    .score-breakdown {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .scoring-criteria-link {
        justify-self: center;
    }
    .review-tools {
        grid-template-columns: 1fr;
    }
    body.mobile-nav-open {
        overflow: hidden;
    }
    .main-content {
        padding: 18px 14px;
    }
    .editors-pick-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .editors-pick-score {
        top: 10px;
        right: 10px;
        transform: scale(0.85);
        transform-origin: top right;
        background: var(--hpr-card);
        border-radius: var(--hpr-radius);
        padding: 6px 10px 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    .editors-pick-title,
    .editors-pick-date,
    .editors-pick-excerpt {
        padding-right: 0;
    }
    .site-header {
        padding-top: 0;
    }
    .header-hero {
        gap: 0;
        padding: 14px;
        border-radius: 0;
    }
    .site-logo-link .site-logo,
    .site-logo-link img {
        width: 170px;
    }
    /* Logo-left / hamburger-right bar; the hamburger opens the nav as an
       off-canvas drawer (below) instead of a panel in the page flow. */
    .header-hero-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .mobile-menu-toggle {
        display: flex;
    }

    /* Off-canvas drawer: fixed over the page, slides in from the right,
       full-bleed to both edges (left/right:0 rather than a vw-based
       width, which can overflow past the viewport and cause the whole
       page to gain a horizontal scrollbar once a scrollbar track exists). */
    .header-hero-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 64px 20px 24px;
        background: radial-gradient(ellipse 140% 140% at 0% 115%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1001;
    }
    .header-hero-nav.is-open {
        transform: translateX(0);
    }
    .lang-switcher {
        align-self: center;
    }
    .lang-switcher-current {
        padding: 9px 14px 9px 12px;
        font-size: 15px;
    }
    /* In the drawer the menu opens in place, centred under the button. */
    .lang-switcher-menu {
        position: static;
        margin-top: 8px;
    }
    .mobile-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
        padding: 0;
        background: rgba(0, 0, 0, 0.2);
        border: 3px solid rgba(0, 0, 0, 0.31);
        border-radius: var(--hpr-radius);
        color: var(--hpr-white);
        font-size: 22px;
        line-height: 1;
    }
    .mobile-nav-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    .nav-menu ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .nav-menu a {
        display: flex;
        padding: 14px 18px;
        font-size: 17px;
    }
    .nav-search {
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .hpr-search-form .search-input-wrapper {
        padding: 12px 18px;
    }
    .hpr-search-form .search-field {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 16px;
    }
    .hpr-search-form .search-submit {
        flex-shrink: 0;
    }
    .hpr-search-form .search-submit-text {
        display: none;
    }
    .tag-bar-label {
        font-size: 13px;
        letter-spacing: 0.08em;
    }
    .tag-bar ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: -4px 0;
        padding: 4px 0;
    }
    .tag-bar ul::-webkit-scrollbar {
        display: none;
    }
    .review-card {
        grid-template-columns: 1fr;
    }
    .review-card-details {
        flex-direction: row;
        justify-content: space-between;
    }
    /* Price above, Full Review and the button below: side by side they
       are wider than a phone screen. */
    .review-card-cta {
        flex-direction: column;
        align-items: stretch;
    }
    /* Full Review and the button each take the card's full width, stacked. */
    .review-card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .review-card-pricing {
        justify-content: center;
    }
    .review-gallery-grid,
    .user-review-grid,
    .comment-form-fields,
    .similar-sites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .review-byline {
        gap: 30px;
    }
    .blog-card {
        grid-template-columns: 1fr;
    }
    .model-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .similar-stars .model-card:nth-child(n+10) {
        display: block;
    }
    .model-hero {
        grid-template-columns: 1fr;
    }
    /* Full width, a portrait photo would fill the screen. */
    .model-hero-photo {
        width: min(100%, 280px);
        margin: 0 auto;
    }
    .model-profile-grid {
        grid-template-columns: 1fr;
    }
    .criteria-grid {
        grid-template-columns: 1fr;
    }
    /* Harry stays beside the text, so the box is shorter and Editor's Pick
       comes up the page. */
    .welcome-box {
        align-items: stretch;
        gap: 4px;
        padding: 0 0 0 16px;
    }
    .welcome-box-text {
        padding: 22px 0;
        gap: 14px;
        min-width: 0;
    }
    .welcome-box .page-title {
        font-size: 28px;
        line-height: 1.1;
    }
    /* The intro is cut to three lines until "Read More" is tapped. */
    .welcome-box-text.has-read-more:not(.is-expanded) .page-intro {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
    /* "HonestPornReviews.com" is wider than the text column on small phones. */
    .welcome-box .page-intro {
        overflow-wrap: anywhere;
    }
    .welcome-read-more:not([hidden]) {
        display: inline-flex;
    }
    .about-harry {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0;
        padding: 20px 18px 0;
    }
    .about-harry-photo {
        flex-basis: auto;
        width: 150px;
        height: 255px;
        align-self: center;
    }
    .about-harry-text {
        text-align: left;
    }
    /* Harry stands on the bottom edge of the box, to the right of the text. */
    .welcome-box-mascot-wrap {
        display: block;
        align-self: flex-end;
        flex: 0 0 120px;
        width: 120px;
        height: auto;
        overflow: hidden;
    }
    .welcome-box-mascot {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
    }
    .friend-sites-grid {
        grid-template-columns: 1fr;
    }
    /* iOS Safari zooms the page when focusing an input under 16px. */
    .review-request-form input,
    .review-request-form select,
    .review-request-form textarea,
    .comment-form input:not([type="checkbox"]):not([type="submit"]),
    .comment-form select,
    .comment-form textarea {
        font-size: 16px;
    }
    .comment-form input.submit {
        width: 100%;
        padding: 14px 20px;
    }
    /* Long labels (e.g. in French) wrap instead of widening the page. */
    .comment-form .visit-site-btn {
        white-space: normal;
        text-align: center;
    }
    .nav-search .hpr-search-form {
        flex: 1 1 auto;
    }
    .welcome-box .page-intro {
        text-align: left;
    }
    /* Keep the corner score badge inside the viewport gutter. */
    .review-card-score-badge {
        top: -12px;
        right: -8px;
    }
    .review-card--top-right .review-card-body {
        padding-right: 0;
    }
    /* Tap targets: footer links, carousel dots and A-Z jump chips. */
    .site-footer .footer-links {
        gap: 0 20px;
    }
    .site-footer .footer-links a {
        display: inline-block;
        padding: 10px 0;
    }
    .editors-pick-dots {
        gap: 0;
    }
    .editors-pick-dot,
    .editors-pick-dot.is-active {
        box-sizing: content-box;
        border: 9px solid transparent;
        background-clip: padding-box;
    }
    .az-jump-link {
        min-width: 38px;
        height: 38px;
    }
    /* The snippet wraps to more lines in the narrow box. */
    .link-to-us-code {
        min-height: 170px;
    }
}

/* ==========================================================================
   Dark mode (inc/dark-mode.php)
   ========================================================================== */

/* The toggle: top right of the header, after the language switcher; on
   phones, a labelled row in the menu drawer under the language switcher.
   Hidden without JavaScript. */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: var(--hpr-radius-pill);
    color: var(--hpr-white);
    cursor: pointer;
}

:root:not([data-theme]) .theme-toggle,
.theme-toggle .theme-toggle-sun,
:root[data-theme="dark"] .theme-toggle .theme-toggle-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-toggle-sun {
    display: block;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--hpr-white);
    outline-offset: 2px;
}

@media (hover: hover) {
    .theme-toggle:hover {
        background: rgba(0, 0, 0, 0.3);
    }
}

/* The label shows only in the phone menu; it names the mode a tap
   switches to. */
.theme-toggle-text,
:root[data-theme="dark"] .theme-toggle .theme-toggle-text-dark {
    display: none;
}

@media (max-width: 600px) {
    .theme-toggle {
        position: static;
        align-self: center;
        gap: 8px;
        width: auto;
        height: auto;
        padding: 8px 16px 8px 14px;
        font: inherit;
        font-size: 16px;
        font-weight: 700;
    }
    .theme-toggle .theme-toggle-text-dark,
    :root[data-theme="dark"] .theme-toggle .theme-toggle-text-light {
        display: inline;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    /* Brand gradients, deeper and less saturated so they don't glare. */
    --hpr-gradient: linear-gradient(135deg, #a63a78 0%, #7442b8 55%, #5a52a8 100%);
    --hpr-grad-pink: #93408b;
    --hpr-grad-blue: #3b6a9c;
    --hpr-btn-pink: #9a4aa3;
    --hpr-btn-blue: #4379b0;
    --hpr-page-bg: #121120;
    --hpr-panel: #1b1a2b;
    --hpr-panel-2: #1d1c2f;
    --hpr-panel-edge: #171626;
    --hpr-card: #242339;
    --hpr-bg: #2b2944;
    --hpr-chip: #2b2944;
    --hpr-chip-2: #242339;
    --hpr-chip-text: rgba(255, 255, 255, 0.55);
    --hpr-chip-shadow: transparent;
    --hpr-line-ece9f5: #37345a;
    --hpr-line-e3def5: #3b3860;
    --hpr-line-e5e7eb: #37345a;
    --hpr-line-efecf8: #333054;
    --hpr-line-eef0f6: #333054;
    --hpr-line-e6e1f5: #3b3860;
    --hpr-line-d5dbef: #44416b;
    --hpr-line-d1d5db: #44416b;
    --hpr-line-e3e0f0: #3b3860;
    --hpr-line-d8d2f0: #44416b;
    --hpr-ink: #f4f3fb;
    --hpr-gold-text: #f2c14e;
    --hpr-tier-green: linear-gradient(180deg, #8af0b6 0%, #45c47c 100%);
    --hpr-tier-green-text: #6fdc9b;
    --hpr-tier-bronze: linear-gradient(180deg, #f2c6a5 0%, #cf8c60 100%);
    --hpr-tier-bronze-text: #e3ab84;
    --hpr-ink-2: #f4f3fb;
    --hpr-text: #dddbe8;
    --hpr-text-light: #a8a6bd;
    --hpr-text-muted: #b6b4c9;
    --hpr-purple: #b9a2ff;
    --hpr-purple-dark: #d9ccff;
    --hpr-pink: #f472b6;
    --hpr-success-bg: rgba(34, 197, 94, 0.14);
    --hpr-green-800: #86efac;
    --hpr-green-700: #86efac;
    --hpr-green-600: #4ade80;
    --hpr-error-bg: rgba(239, 68, 68, 0.15);
    --hpr-error-text: #fca5a5;
    --hpr-warn-bg: rgba(245, 158, 11, 0.14);
}

/* The header, ad-sample bar and footer are brand-coloured panels: they
   keep their light-mode colours. */
:root[data-theme="dark"] :is(.site-header, .tag-bar, .site-footer) {
    color-scheme: light;
    --hpr-card: #ffffff;
    --hpr-bg: #eef1fb;
    --hpr-text: #333344;
    --hpr-text-light: #6b7280;
    --hpr-text-muted: #6d6d6d;
    --hpr-ink: #000000;
    --hpr-purple: #7c3aed;
    --hpr-purple-dark: #4c1d95;
    --hpr-pink: #ec4899;
    --hpr-line-ece9f5: #ece9f5;
    --hpr-line-e3def5: #e3def5;
    --hpr-line-d5dbef: #d5dbef;
}

/* The ads bar in a deep steel blue (it matches the dark header's blue end)
   instead of the bright sky blue. */
:root[data-theme="dark"] .tag-bar .hpr-container {
    background: #243f5c;
}

:root[data-theme="dark"] .tag-bar-label {
    color: #7fa3c6;
}

:root[data-theme="dark"] .tag-bar a {
    background: rgba(127, 170, 212, 0.2);
    color: #e3ecf6;
}

:root[data-theme="dark"] .tag-bar a:hover {
    background: rgba(127, 170, 212, 0.36);
    color: #ffffff;
}

/* Sidebar social icons: a lighter circle with an edge, so they stand out
   from the dark panel (hover keeps the gradient). */
:root[data-theme="dark"] .sidebar-left .socials a:not(:hover) {
    background: #3d3a66;
    box-shadow: inset 0 0 0 1px #5a5690;
    color: #ece6ff;
}

/* The footer panel, a little dimmed so it doesn't glare on a dark page. */
:root[data-theme="dark"] .site-footer .hpr-container {
    filter: brightness(0.82) saturate(0.9);
}

/* Boxes with their own light backgrounds. */
:root[data-theme="dark"] .rr-site {
    background: var(--hpr-card);
}

:root[data-theme="dark"] .rr-site-remove:hover {
    background: rgba(236, 72, 153, 0.15);
}

:root[data-theme="dark"] .reviewer-hero-photo {
    background: radial-gradient(circle at 50% 35%, #34315a 0%, #1f1e33 100%);
}

:root[data-theme="dark"] .deal-alert--banner {
    background: linear-gradient(135deg, #2a2242 0%, #1f2540 100%);
}

:root[data-theme="dark"] .model-hero-photo img.porn-star-default-photo {
    background: linear-gradient(135deg, #2b2944 0%, #34315a 100%);
}

:root[data-theme="dark"] .best-sites-thumb {
    background: var(--hpr-bg);
}

:root[data-theme="dark"] .editors-pick-dot:not(.is-active) {
    background-color: #4a4570; /* Only the color: phones keep the dots' padding-box clip. */
}

/* Prose links: a lighter underline on the dark background. */
:root[data-theme="dark"] .entry-content a:not([class]):not(ul[class] a):not(ol[class] a),
:root[data-theme="dark"] .faq-answer a {
    text-decoration-color: rgba(185, 162, 255, 0.45);
}

/* Form fields. */
:root[data-theme="dark"] .site-container :is(input, textarea, select):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
    color: var(--hpr-text);
}

:root[data-theme="dark"] .site-container ::placeholder {
    color: #8c8aa3;
}

/* ==========================================================================
   404 page: Harry hero, URL-based suggestions, top-rated sites, links
   ========================================================================== */
.notfound-hero {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 20px 0 36px;
    background: radial-gradient(ellipse 60.18% 681.91% at -2.2% 225%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%), #000000;
    border-radius: 15px;
    overflow: hidden;
}

.notfound-hero-text {
    flex: 1;
    min-width: 0;
    padding: 30px 0 34px;
    color: #ffffff;
}

.notfound-code {
    margin: 0;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 6px 24px rgba(76, 29, 149, 0.35);
}

.notfound-hero .page-title {
    margin: 10px 0 12px;
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    color: #ffffff;
}

.notfound-intro {
    margin: 0 0 22px;
    max-width: 430px;
    font-size: 15px;
    line-height: 1.45;
    color: #ffffff;
}

.notfound-search {
    display: flex;
    max-width: 440px;
    background: #ffffff;
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 6px 18px rgba(26, 26, 46, 0.18);
}

.notfound-search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    font-size: 15px;
    color: #333344;
    outline: none;
}

.notfound-search input[type="search"]::placeholder {
    color: #8a8a9a;
}

.notfound-search button {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    padding: 10px 22px;
    background: var(--hpr-purple-fill);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.notfound-search button:hover,
.notfound-search button:focus-visible {
    background: var(--hpr-purple-dark-fill);
}

.notfound-search:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(26, 26, 46, 0.18);
}

.notfound-harry {
    flex-shrink: 0;
    width: 230px;
    align-self: flex-end;
    margin-top: 16px;
}

.notfound-harry img {
    display: block;
    width: 100%;
    height: auto;
}

.notfound-suggestions {
    margin-top: 32px;
}

.notfound-suggestion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.notfound-suggestion-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb, #e5e7eb);
    border-radius: 12px;
    color: var(--hpr-ink, #1a1a2e);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.notfound-suggestion-list a:hover,
.notfound-suggestion-list a:focus-visible {
    border-color: var(--hpr-purple);
    transform: translateY(-1px);
}

.notfound-suggestion-title {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notfound-suggestion-type {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hpr-purple);
}

.notfound-top {
    margin-top: 32px;
}

.notfound-top .similar-site-card {
    color: var(--hpr-ink, #1a1a2e);
    text-decoration: none;
}

.notfound-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 36px 0 10px;
}

.notfound-links a {
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb, #e5e7eb);
    color: var(--hpr-purple);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.notfound-links a:hover,
.notfound-links a:focus-visible {
    background: var(--hpr-purple-fill);
    border-color: var(--hpr-purple-fill);
    color: #ffffff;
}

@media (max-width: 600px) {
    .notfound-hero {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
    }
    .notfound-hero-text {
        padding: 26px 0 0;
        text-align: center;
    }
    .notfound-code {
        font-size: 72px;
    }
    .notfound-hero .page-title {
        font-size: 28px;
    }
    .notfound-intro,
    .notfound-search {
        margin-left: auto;
        margin-right: auto;
    }
    /* Harry rises from the bottom edge, head to belt. */
    .notfound-harry {
        width: 160px;
        height: 170px;
        align-self: center;
        margin-top: 14px;
        overflow: hidden;
    }
    .notfound-suggestion-list {
        grid-template-columns: 1fr;
    }
}

/* The 404 search pill stays white in dark mode, so keep its text dark (the
   :not()s outrank the dark form-field rule above). */
:root[data-theme="dark"] .site-container .notfound-search input[type="search"]:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
    color: #333344;
    background: transparent;
}

:root[data-theme="dark"] .site-container .notfound-search input[type="search"]:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"])::placeholder {
    color: #8a8a9a;
}

/* ==========================================================================
   Harry's comics (inc/comics.php): a paper strip of up to 4 panels. The
   strip keeps its light "paper" colours in dark mode, like printed comics.
   ========================================================================== */
.comic-strip {
    --comic-ink: #1a1a2e;
    --comic-paper: #fffdf7;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    background: var(--comic-paper);
    border: 3px solid var(--comic-ink);
    border-radius: 16px;
    box-shadow: 0 6px 0 rgba(26, 26, 46, 0.12);
    color: var(--comic-ink);
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.comic-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comic-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comic-strip--1 { grid-template-columns: minmax(0, 1fr); max-width: 320px; }

.comic-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 3 / 4;
    min-width: 0;
    overflow: hidden;
    border: 2.5px solid var(--comic-ink);
    border-radius: 10px;
    background: #f1edff;
}

.comic-panel--harry {
    background: radial-gradient(circle at 30% 18%, #ffffff 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(160deg, #ffd6f7 0%, #c9e6ff 100%);
}

.comic-panel--calendar,
.comic-panel--statement {
    background: #eef3ff;
}

.comic-panel--caption {
    background: #fff3b8;
}

.comic-caption {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin: 6px 6px 0;
    padding: 3px 8px;
    background: #ffe98a;
    border: 2px solid var(--comic-ink);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.comic-panel-art {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.comic-panel-number {
    position: absolute;
    right: 6px;
    bottom: 5px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    color: rgba(26, 26, 46, 0.35);
}

/* Harry and his speech bubble */
.comic-panel--harry .comic-panel-art {
    justify-content: flex-start;
    padding: 8px 8px 0;
}

.comic-bubble {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 8px 10px;
    background: #ffffff;
    border: 2px solid var(--comic-ink);
    border-radius: 14px;
    font-size: clamp(11px, 1.05vw, 13.5px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.comic-bubble::after {
    content: "";
    position: absolute;
    left: 48%;
    bottom: -11px;
    width: 16px;
    height: 12px;
    background: #ffffff;
    border-right: 2px solid var(--comic-ink);
    border-bottom: 2px solid var(--comic-ink);
    transform: skewX(-30deg) rotate(12deg);
    border-bottom-right-radius: 4px;
}

.comic-harry {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin-top: 6px;
}

.comic-harry picture,
.comic-harry img {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
}

/* Props: join page, checkbox form */
.comic-screen,
.comic-form,
.comic-statement,
.comic-calendar,
.comic-review {
    width: 100%;
    background: #ffffff;
    border: 2px solid var(--comic-ink);
    border-radius: 10px;
    box-shadow: 3px 3px 0 rgba(26, 26, 46, 0.18);
}

.comic-screen-bar {
    display: flex;
    gap: 4px;
    padding: 5px 7px;
    border-bottom: 2px solid var(--comic-ink);
    background: #e7e3f7;
    border-radius: 8px 8px 0 0;
}

.comic-screen-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6b8a;
}

.comic-screen-bar i:nth-child(2) { background: #ffcc4d; }
.comic-screen-bar i:nth-child(3) { background: #5fd38a; }

.comic-screen-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px 12px;
    text-align: center;
}

.comic-screen-site {
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.comic-screen-price {
    font-size: clamp(20px, 2.3vw, 28px);
    font-weight: 800;
    line-height: 1.05;
    color: #7c3aed;
}

.comic-screen-note {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: #4b4b63;
}

.comic-screen-button {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 14px;
    border: 2px solid var(--comic-ink);
    border-radius: 999px;
    background: linear-gradient(90deg, #ff62ef, #76c2ff);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(26, 26, 46, 0.35);
}

.comic-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 10px;
}

.comic-form-row {
    display: flex;
    gap: 8px;
    margin: 0;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    line-height: 1.3;
}

.comic-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--comic-ink);
    border-radius: 4px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.comic-check.is-checked {
    background: #7c3aed;
    color: #ffffff;
}

.comic-form small {
    font-size: 10px;
    color: #6b6b80;
}

.comic-form .comic-screen-button {
    align-self: center;
}

/* Card statement */
.comic-statement {
    padding: 10px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.comic-statement-title {
    margin: 0 0 6px;
    padding-bottom: 5px;
    border-bottom: 2px dashed rgba(26, 26, 46, 0.35);
    font-family: 'Rounded Mplus 1c', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comic-statement ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comic-statement li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 6px;
    padding: 4px 3px;
    font-size: clamp(9px, 0.85vw, 11px);
    line-height: 1.3;
}

.comic-statement li span {
    overflow-wrap: anywhere;
}

.comic-statement li.is-new {
    margin-top: 2px;
    background: #fff08a;
    border-radius: 4px;
    color: #c0174a;
    font-weight: 800;
}

/* Calendar */
.comic-calendar {
    position: relative;
    padding: 26px 10px 18px;
    text-align: center;
    background: linear-gradient(#ff6b8a 0 16px, #ffffff 16px);
}

.comic-calendar-rings {
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
}

.comic-calendar-rings i {
    width: 8px;
    height: 16px;
    border: 2px solid var(--comic-ink);
    border-radius: 4px;
    background: #ffffff;
}

.comic-calendar p {
    margin: 0;
    font-size: clamp(14px, 1.45vw, 18px);
    font-weight: 800;
    line-height: 1.2;
}

/* Caption card */
.comic-caption-card {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

/* Review card (live data) */
a.comic-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    padding-bottom: 10px;
    color: var(--comic-ink);
    text-align: center;
    text-decoration: none;
}

.comic-review img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-bottom: 2px solid var(--comic-ink);
}

.comic-review strong {
    padding: 0 6px;
    font-size: 13px;
    line-height: 1.2;
}

.comic-review-score {
    padding: 2px 10px;
    border: 2px solid var(--comic-ink);
    border-radius: 999px;
    background: #5fd38a;
    font-size: 14px;
    font-weight: 800;
}

.comic-review-price {
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
}

/* Page parts around the strip */
.comic-header {
    margin-bottom: 16px;
}

.comic-kicker {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.comic-kicker a {
    color: var(--hpr-purple);
    text-decoration: none;
}

.comic-date {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--hpr-text-light);
}

.comic-tip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-top: 16px;
    padding: 14px 18px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb);
    border-left: 4px solid var(--hpr-purple);
    border-radius: 12px;
}

.comic-tip p {
    flex: 1 1 320px;
    margin: 0;
    line-height: 1.5;
}

.comic-tip-link {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--hpr-purple-fill);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.comic-tip-link:hover,
.comic-tip-link:focus-visible {
    background: var(--hpr-purple-dark-fill);
}

.comic-single .share-buttons {
    margin-top: 16px;
}

.comic-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.comic-nav a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 48%;
    padding: 12px 16px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb);
    border-radius: 12px;
    color: var(--hpr-ink, #1a1a2e);
    font-weight: 700;
    text-decoration: none;
}

.comic-nav a span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hpr-purple);
}

.comic-nav-next {
    margin-left: auto;
    text-align: right;
}

.comic-list-item {
    margin-bottom: 44px;
}

.comic-list-title {
    margin: 0;
    font-size: 22px;
}

.comic-list-title a {
    color: var(--hpr-ink, #1a1a2e);
    text-decoration: none;
}

.comic-list-title a:hover {
    color: var(--hpr-purple);
}

@media (max-width: 600px) {
    .comic-strip,
    .comic-strip--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
    }
    .comic-bubble {
        font-size: 12px;
    }
    .comic-screen-price {
        font-size: 22px;
    }
    .comic-statement li {
        font-size: 10px;
    }
    .comic-nav {
        flex-direction: column;
    }
    .comic-nav a {
        max-width: none;
    }
}

/* ==========================================================================
   Find My Site quiz (find-my-site.php, inc/site-finder.php)
   ========================================================================== */
.finder-hero {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 20px 0 30px;
    background: radial-gradient(ellipse 60.18% 681.91% at -2.2% 225%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%), #000000;
    border-radius: 15px;
    overflow: hidden;
}

.finder-hero-text {
    flex: 1;
    padding: 28px 0;
    color: #ffffff;
}

.finder-hero .page-title {
    margin: 0 0 10px;
    font-size: 34px;
    color: #ffffff;
}

.finder-hero .page-intro {
    margin: 0;
    max-width: 460px;
    color: #ffffff;
}

.finder-hero-harry {
    position: relative;
    flex-shrink: 0;
    width: 150px;
    height: 170px;
    margin-top: 14px;
    overflow: hidden;
}

.finder-hero-harry img {
    display: block;
    width: 100%;
    height: auto;
}

.finder-form {
    margin-top: 26px;
}

.finder-step {
    margin: 0 0 16px;
    padding: 16px 18px 18px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb);
    border-radius: 14px;
}

.finder-step legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--hpr-ink, #1a1a2e);
}

.finder-step legend small {
    font-size: 13px;
    font-weight: 400;
    color: var(--hpr-text-light);
}

.finder-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hpr-gradient);
    color: #ffffff;
    font-size: 14px;
}

.finder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.finder-chip {
    position: relative;
    cursor: pointer;
}

.finder-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.finder-chip span {
    display: inline-block;
    padding: 8px 14px;
    border: 1.5px solid var(--hpr-line-e5e7eb);
    border-radius: 999px;
    background: var(--hpr-bg);
    color: var(--hpr-text);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.finder-chip:hover span {
    border-color: var(--hpr-purple);
}

.finder-chip input:checked + span {
    background: var(--hpr-purple-fill);
    border-color: var(--hpr-purple-fill);
    color: #ffffff;
}

.finder-chip input:focus-visible + span {
    outline: 2px solid var(--hpr-purple);
    outline-offset: 2px;
}

.finder-submit,
.finder-button {
    display: inline-block;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--hpr-gradient);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.finder-submit {
    display: block;
    margin: 6px auto 0;
}

.finder-submit:hover,
.finder-button:hover {
    filter: brightness(1.06);
}

.finder-results {
    margin-top: 28px;
    scroll-margin-top: 20px;
}

.finder-relaxed {
    padding: 10px 14px;
    background: var(--hpr-warn-bg, #fff8e1);
    border-radius: 10px;
    font-size: 14px;
}

.finder-top {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.finder-card {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 14px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb);
    border-radius: 14px;
}

.finder-card:first-child {
    border: 2px solid var(--hpr-purple);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.15);
}

.finder-rank {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hpr-gradient);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(26, 26, 46, 0.2);
}

.finder-card-image {
    flex: 0 0 230px;
}

.finder-card-image img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

.finder-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finder-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-size: 20px;
}

.finder-card-title a {
    color: var(--hpr-ink, #1a1a2e);
    text-decoration: none;
}

.finder-card-score {
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--hpr-green-600, #16a34a);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.finder-reasons {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.finder-reasons li {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.finder-reasons .is-yes {
    background: var(--hpr-success-bg, #e8f7ee);
    color: var(--hpr-green-700, #15803d);
}

.finder-reasons .is-no {
    background: var(--hpr-error-bg, #fdecec);
    color: var(--hpr-error-text, #b42318);
}

.finder-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.finder-button {
    padding: 9px 20px;
    font-size: 14px;
}

.finder-button--ghost {
    background: transparent;
    border: 1.5px solid var(--hpr-purple);
    color: var(--hpr-purple);
}

.finder-more-title {
    margin: 22px 0 8px;
    font-size: 16px;
}

.finder-more {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.finder-more li {
    padding: 6px 12px;
    background: var(--hpr-card);
    border: 1px solid var(--hpr-line-e5e7eb);
    border-radius: 999px;
    font-size: 14px;
}

.finder-more a {
    font-weight: 700;
    text-decoration: none;
}

.finder-more span {
    color: var(--hpr-text-light);
}

.finder-again {
    margin: 16px 0 0;
    text-align: center;
}

@media (max-width: 600px) {
    .finder-hero {
        padding: 0 16px 0 20px;
    }
    .finder-hero .page-title {
        font-size: 26px;
    }
    .finder-hero-harry {
        width: 100px;
        height: 130px;
    }
    .finder-card {
        flex-direction: column;
    }
    .finder-card-image {
        flex-basis: auto;
    }
    .finder-card-image img {
        height: 160px;
    }
}

/* Homepage link to the quiz, after the FAQ (front-page.php). */
.finder-cta {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 36px;
    padding: 0 20px 0 30px;
    background: radial-gradient(ellipse 60.18% 681.91% at -2.2% 225%, var(--hpr-grad-pink) 0%, var(--hpr-grad-blue) 100%), #000000;
    border-radius: 15px;
    overflow: hidden;
}

.finder-cta-text {
    flex: 1;
    padding: 24px 0 26px;
    color: #ffffff;
}

.finder-cta h2 {
    margin: 0 0 6px;
    font-size: 26px;
    color: #ffffff;
}

.finder-cta p {
    margin: 0 0 16px;
    color: #ffffff;
}

.finder-cta .finder-button {
    background: #ffffff;
    color: var(--hpr-purple-fill);
}

.finder-cta-harry {
    flex-shrink: 0;
    width: 160px;
    height: 165px;
    margin-top: 12px;
    overflow: hidden;
}

.finder-cta-harry img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .finder-cta {
        padding: 0 14px 0 18px;
    }
    .finder-cta h2 {
        font-size: 21px;
    }
    .finder-cta-harry {
        width: 100px;
        height: 125px;
    }
}

/* ==========================================================================
   Age gate (inc/age-gate.php): in regions that require age verification,
   unverified visitors see every adult image blurred (and, when switched on,
   a bar to start verification).
   ========================================================================== */
/* Always blurred: !important so no hover or other filter can lift it;
   clip-path keeps the blur inside the image's own box. */
img.hpr-age-locked,
.hpr-age-gated .gallery-slider-overlay .slider-image {
    filter: blur(22px) !important;
    clip-path: inset(0);
}

/* A filtered image paints above earlier positioned siblings: keep badges
   that sit on top of images in front. */
.hpr-age-gated .editors-pick-score,
.hpr-age-gated .sotw-ribbon,
.hpr-age-gated .review-card-score-badge {
    z-index: 2;
}

.age-gate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    padding: 10px 16px;
    background: var(--hpr-purple-fill);
    color: var(--hpr-white);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.age-gate-bar-btn {
    padding: 6px 14px;
    border-radius: var(--hpr-radius-pill);
    background: #ffffff;
    color: #4c1d95; /* Fixed: the bar is purple in both themes. */
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

@media (hover: hover) {
    .age-gate-bar-btn:hover {
        background: #f3efff;
    }
}