/**
 * Hub strony "Filtry prywatyzujace" (category index) - spojny z paleta sklepu (#c41e00, #1a1a2e).
 */
.ch-hub-page {
    --ch-accent: #c41e00;
    --ch-accent-soft: #fce4e1;
    --ch-ink: #1a1a2e;
    --ch-muted: #666;
    --ch-line: #eee;
    --ch-radius: 12px;
    --ch-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    --ch-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.ch-hub-hero {
    background: linear-gradient(165deg, #fff 0%, #faf8f8 45%, var(--ch-accent-soft) 100%);
    border-bottom: 1px solid var(--ch-line);
    padding: 28px 0 36px;
}

.ch-hub-hero-inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.ch-hub-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ch-accent);
    margin: 0 0 8px;
}

.ch-hub-title {
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--ch-ink);
    margin: 0 0 14px;
    line-height: 1.25;
}

.ch-hub-intro {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ch-muted);
    margin: 0 auto 22px;
    max-width: 52em;
}

.ch-hub-search {
    display: flex;
    max-width: 440px;
    margin: 0 auto;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: var(--ch-shadow);
    border: 1px solid var(--ch-line);
    background: #fff;
}

.ch-hub-search-input {
    flex: 1;
    border: 0 !important;
    padding: 14px 20px !important;
    font-size: 15px;
    outline: none;
    box-shadow: none !important;
}

.ch-hub-search-btn {
    border: 0;
    background: var(--ch-accent);
    color: #fff;
    padding: 0 22px;
    font-size: 18px;
    transition: background 0.15s, transform 0.1s;
}

.ch-hub-search-btn:hover,
.ch-hub-search-btn:focus {
    background: #a51800;
    color: #fff;
}

.ch-hub-section {
    padding: 40px 0;
}

.ch-hub-section--muted {
    background: #f8f9fb;
    border-top: 1px solid var(--ch-line);
}

.ch-hub-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ch-ink);
    text-align: center;
    margin: 0 0 26px;
}

.ch-hub-section-title--left {
    text-align: left;
}

/* --- Kafle kategorii (reusable look) --- */
.ch-hub-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.ch-hub-nav-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-radius: var(--ch-radius);
    border: 1px solid var(--ch-line);
    box-shadow: var(--ch-shadow);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
    min-height: 100%;
}

.ch-hub-nav-card:hover,
.ch-hub-nav-card:focus {
    transform: translateY(-4px);
    box-shadow: var(--ch-shadow-hover);
    border-color: rgba(196, 30, 0, 0.35);
    text-decoration: none;
    color: inherit;
}

.ch-hub-nav-card:focus {
    outline: 2px solid var(--ch-accent);
    outline-offset: 2px;
}

.ch-hub-nav-card-media {
    aspect-ratio: 4 / 3;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 22px;
}

.ch-hub-nav-card-media > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ch-hub-nav-card-icon {
    font-size: 42px;
    color: var(--ch-accent);
    opacity: 0.85;
}

.ch-hub-nav-card-body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ch-hub-nav-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ch-ink);
    line-height: 1.35;
    margin: 0;
}

.ch-hub-nav-card-go {
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-accent);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- Korzysci (6) --- */
.ch-hub-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
}

.ch-hub-benefit {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: #fff;
    border-radius: var(--ch-radius);
    border: 1px solid var(--ch-line);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ch-hub-benefit-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ch-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ch-accent);
    font-size: 20px;
}

.ch-hub-benefit h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ch-ink);
}

.ch-hub-benefit p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ch-muted);
    margin: 0;
}

/* --- CTA --- */
.ch-hub-cta {
    background: linear-gradient(90deg, #1a1a2e 0%, #252540 100%);
    color: #fff;
    padding: 36px 0;
}

.ch-hub-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
}

.ch-hub-cta-inner p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.92;
}

.ch-hub-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    background: var(--ch-accent);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.15s, transform 0.12s;
}

.ch-hub-btn-primary:hover,
.ch-hub-btn-primary:focus {
    background: #e02018;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* --- Showcase (6) --- */
.ch-hub-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.ch-hub-showcase-card {
    background: #fff;
    border-radius: var(--ch-radius);
    border: 1px solid var(--ch-line);
    box-shadow: var(--ch-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s;
}

.ch-hub-showcase-card:hover {
    box-shadow: var(--ch-shadow-hover);
    transform: translateY(-2px);
}

.ch-hub-showcase-media {
    aspect-ratio: 16 / 10;
    background: #f0f0f4;
    overflow: hidden;
}

.ch-hub-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ch-hub-showcase-body {
    padding: 18px 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ch-hub-showcase-body h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.3;
}

.ch-hub-showcase-body h3 a {
    color: var(--ch-ink);
    text-decoration: none;
}

.ch-hub-showcase-body h3 a:hover {
    color: var(--ch-accent);
}

.ch-hub-showcase-sub {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ch-accent);
    margin: 0 0 10px;
}

.ch-hub-showcase-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ch-muted);
    margin: 0;
    flex: 1;
}

.ch-hub-showcase-desc a {
    color: var(--ch-accent);
    font-weight: 600;
}

/* --- Wspolpraca + zdjecie --- */
.ch-hub-trust {
    padding: 48px 0 56px;
    background: #fff;
    border-top: 1px solid var(--ch-line);
}

.ch-hub-trust-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 36px;
    align-items: center;
}

.ch-hub-trust-copy p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ch-muted);
    margin: 0;
}

.ch-hub-trust-visual {
    border-radius: var(--ch-radius);
    overflow: hidden;
    background: #fff;
}

.ch-hub-trust-img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

@media (max-width: 991px) {
    .ch-hub-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .ch-hub-trust-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ch-hub-trust-visual {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .ch-hub-benefits {
        grid-template-columns: 1fr;
    }

    .ch-hub-showcase {
        grid-template-columns: 1fr;
    }

    .ch-hub-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .ch-hub-nav {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================
   CATEGORY HUB V5 - final image spacing, B2B blend and mobile nav fixes
   ================================================================== */
.ch-hub-hero {
    background-image: url('../images/category-hub/privacy-office-hero-v2-crop.jpg');
    background-position: right center;
    background-size: auto 100%;
}

.ch-hub-nav-card,
.ch-hub-nav-card:hover,
.ch-hub-nav-card:focus {
    background: linear-gradient(90deg, #efedeb 0%, #f7f6f5 38%, #fff 57%, #fff 100%);
}

.ch-hub-nav-card:hover .ch-hub-nav-card-media > img,
.ch-hub-nav-card:focus .ch-hub-nav-card-media > img {
    transform: none;
}

.ch-hub-nav-card-media {
    position: relative;
    margin: 15px 16px 15px 0;
    padding: 0 14px 0 20px;
    border-left: 1px solid #e2dfdc;
    background: #fff;
}

.ch-hub-nav-card-media:before {
    display: none;
}

.ch-hub-nav-card-media > img,
.ch-hub-nav-card:hover .ch-hub-nav-card-media > img {
    width: 90%;
    max-width: 90%;
    height: 90%;
    transform: none;
}

.ch-hub-partnership {
    grid-template-columns: 58% 42%;
    background: linear-gradient(90deg, #eceae8 0%, #f4f3f2 45%, #fff 72%, #fff 100%);
}

.ch-hub-partnership-copy {
    z-index: 3;
    padding-right: 22px;
}

.ch-hub-partnership-benefits {
    width: 100%;
}

.ch-hub-partnership-visual {
    z-index: 1;
    margin-left: 0;
    background: #fff;
}

.ch-hub-partnership-visual:before {
    z-index: 2;
    width: 110px;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.86) 35%, rgba(255,255,255,0) 100%);
}

.ch-hub-partnership-visual img {
    -webkit-mask-image: none;
    mask-image: none;
}

@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .ch-hub-page {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .ch-hub-page > .container,
    .ch-hub-page section > .container,
    .ch-hub-page header > .container {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        box-sizing: border-box;
    }
    .navbar-default {
        width: 100%;
        background: #fff !important;
    }
    .navbar-collapse,
    .navbar-collapse.collapse.in,
    .navbar-default .navbar-nav,
    .navbar-default .dropdown-menu {
        background: #fff !important;
    }
    .navbar-collapse.collapse.in {
        position: relative;
        z-index: 1000;
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 10px 22px rgba(0,0,0,.12);
    }
    .ch-hub-hero {
        background-position: 65% center;
        background-size: auto 100%;
    }
    .ch-hub-partnership {
        grid-template-columns: 1fr;
    }
    .ch-hub-partnership-visual:before {
        top: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 70px;
        background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
    }
}

@media (max-width: 479px) {
    .ch-hub-nav-card-media {
        margin-right: 10px;
        padding-right: 8px;
        padding-left: 12px;
    }
    .ch-hub-nav-card-media > img,
    .ch-hub-nav-card:hover .ch-hub-nav-card-media > img {
        width: 88%;
        max-width: 88%;
        height: 88%;
    }
}

/* ==================================================================
   CATEGORY HUB V4 - wide 2x2 cards and seamless white image blending
   ================================================================== */
.ch-hub-hero {
    border-bottom: 1px solid #e4e4e4;
}

.ch-hub-section {
    padding-top: 42px;
}

.ch-hub-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ch-hub-nav-card,
.ch-hub-nav-card:hover,
.ch-hub-nav-card:focus {
    grid-template-columns: 42% 58%;
    min-height: 245px;
    background: linear-gradient(90deg, #f2f0ee 0%, #f7f6f5 38%, #fff 58%, #fff 100%);
}

.ch-hub-nav-card-body {
    padding: 30px 10px 28px 28px;
}

.ch-hub-nav-card-name {
    max-width: 205px;
    font-size: 18px;
}

.ch-hub-nav-card-media {
    padding: 15px 18px 15px 0;
    background: #fff;
}

.ch-hub-nav-card-media:before {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: -42px;
    width: 70px;
    background: linear-gradient(90deg, rgba(247,246,245,0) 0%, #fff 72%);
    content: '';
    pointer-events: none;
}

.ch-hub-nav-card-media > img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
}

.ch-hub-partnership {
    background: linear-gradient(90deg, #eeecea 0%, #f5f4f3 37%, #fff 68%, #fff 100%);
}

.ch-hub-partnership-copy {
    padding-right: 12px;
}

.ch-hub-partnership-visual {
    margin-left: -72px;
}

.ch-hub-partnership-visual img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 10%, #000 32%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 10%, #000 32%, #000 100%);
}

@media (max-width: 991px) {
    .ch-hub-nav-card,
    .ch-hub-nav-card:hover,
    .ch-hub-nav-card:focus {
        grid-template-columns: 40% 60%;
    }
}

@media (max-width: 767px) {
    .ch-hub-nav {
        grid-template-columns: 1fr;
    }
    .ch-hub-partnership-visual {
        margin-left: 0;
    }
    .ch-hub-partnership-visual img {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
    }
}

@media (max-width: 479px) {
    .ch-hub-nav-card,
    .ch-hub-nav-card:hover,
    .ch-hub-nav-card:focus {
        grid-template-columns: 42% 58%;
        min-height: 215px;
    }
    .ch-hub-nav-card-body {
        padding: 24px 4px 22px 18px;
    }
    .ch-hub-nav-card-name {
        font-size: 15px;
    }
}

/* ==================================================================
   CATEGORY HUB V3 - cafe hero, compact device cards, support + B2B
   ================================================================== */
.ch-hub-page {
    --ch-radius: 8px;
    background: #fff;
}

.ch-hub-hero {
    min-height: 430px;
    padding: 0;
    border-bottom: 0;
    background-color: #fff;
    background-image: url('../images/category-hub/privacy-cafe-hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.ch-hub-hero .container {
    min-height: 430px;
    display: flex;
    align-items: center;
}

.ch-hub-hero-inner {
    width: 43%;
    max-width: 520px;
    margin: 0;
    padding: 50px 0;
    text-align: left;
}

.ch-hub-title {
    max-width: 500px;
    margin: 0 0 22px;
    color: #15151b;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -1.3px;
}

.ch-hub-intro {
    max-width: 400px;
    margin: 0 0 28px;
    color: #555861;
    font-size: 15px;
    line-height: 1.7;
}

.ch-hub-search {
    max-width: 430px;
    margin: 0;
    border: 1px solid #dedede;
    border-radius: 6px;
    box-shadow: 0 8px 26px rgba(35, 32, 30, 0.08);
}

.ch-hub-search-input {
    min-width: 0;
    padding: 14px 17px !important;
    font-size: 13px;
}

.ch-hub-search-btn {
    width: 54px;
    padding: 0;
}

.ch-hub-section {
    padding: 44px 0 34px;
}

.ch-hub-section-title {
    margin: 0 0 22px;
    text-align: left;
    font-size: 23px;
    line-height: 1.25;
}

.ch-hub-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ch-hub-nav-card {
    display: grid;
    grid-template-columns: 43% 57%;
    min-height: 226px;
    border-color: #e5e5e5;
    border-radius: var(--ch-radius);
    box-shadow: 0 3px 16px rgba(25, 30, 40, 0.045);
    background: linear-gradient(135deg, #fff 0%, #f8f7f6 100%);
}

.ch-hub-nav-card:hover,
.ch-hub-nav-card:focus {
    transform: translateY(-3px);
    border-color: rgba(196, 30, 0, 0.28);
    box-shadow: 0 11px 28px rgba(25, 30, 40, 0.09);
}

.ch-hub-nav-card-body {
    position: relative;
    z-index: 2;
    order: 1;
    min-width: 0;
    padding: 24px 0 22px 18px;
    gap: 0;
}

.ch-hub-nav-card-label {
    display: block;
    margin-bottom: 13px;
    color: var(--ch-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.ch-hub-nav-card-name {
    max-width: 120px;
    font-size: 15px;
    line-height: 1.35;
}

.ch-hub-nav-card-go {
    margin-top: auto;
    padding-top: 20px;
    font-size: 11px;
    white-space: nowrap;
}

.ch-hub-nav-card-go .fa {
    transition: transform 0.18s;
}

.ch-hub-nav-card:hover .ch-hub-nav-card-go .fa {
    transform: translateX(3px);
}

.ch-hub-nav-card-media {
    order: 2;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    padding: 18px 8px 18px 0;
    background: transparent;
}

.ch-hub-nav-card-media > img {
    width: 116%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.ch-hub-nav-card:hover .ch-hub-nav-card-media > img {
    transform: scale(1.035);
}

.ch-hub-actions {
    padding: 0 0 52px;
    background: #fff;
}

.ch-hub-actions-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.84fr) minmax(0, 2.16fr);
    gap: 16px;
}

.ch-hub-support,
.ch-hub-partnership {
    min-height: 276px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: var(--ch-radius);
    background: linear-gradient(135deg, #fff 0%, #f7f6f5 100%);
}

.ch-hub-support {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 26px;
}

.ch-hub-action-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ch-hub-action-heading > .fa {
    flex: 0 0 auto;
    width: 22px;
    color: var(--ch-accent);
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
}

.ch-hub-action-heading h2 {
    margin: 0 0 7px;
    color: var(--ch-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.ch-hub-action-heading p {
    margin: 0;
    color: var(--ch-muted);
    font-size: 12px;
    line-height: 1.55;
}

.ch-hub-contact-list {
    display: grid;
    gap: 11px;
    margin: 24px 0 22px;
}

.ch-hub-contact-list a {
    color: var(--ch-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.ch-hub-contact-list a:hover {
    color: var(--ch-accent);
}

.ch-hub-contact-list .fa {
    width: 24px;
    color: var(--ch-accent);
}

.ch-hub-btn-primary {
    gap: 9px;
    margin-top: auto;
    padding: 11px 18px;
    border: 0;
    border-radius: 4px;
    background: var(--ch-accent);
    font-size: 11px;
    letter-spacing: 0;
    transition: background 0.15s, transform 0.15s;
}

.ch-hub-btn-primary:hover,
.ch-hub-btn-primary:focus {
    background: #a31800;
}

.ch-hub-partnership {
    display: grid;
    grid-template-columns: 52% 48%;
}

.ch-hub-partnership-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0 26px 28px;
}

.ch-hub-partnership-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: calc(100% + 90px);
    margin: 24px 0 20px;
    padding: 0;
    list-style: none;
}

.ch-hub-partnership-benefits li {
    color: #494b52;
    font-size: 9px;
    line-height: 1.35;
}

.ch-hub-partnership-benefits .fa {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    padding-top: 4px;
    border: 1px solid var(--ch-accent);
    border-radius: 50%;
    color: var(--ch-accent);
    font-size: 8px;
    text-align: center;
}

.ch-hub-partnership-visual {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.ch-hub-partnership-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

@media (max-width: 1199px) {
    .ch-hub-nav-card {
        grid-template-columns: 46% 54%;
    }
    .ch-hub-nav-card-name {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .ch-hub-hero,
    .ch-hub-hero .container {
        min-height: 390px;
    }
    .ch-hub-hero-inner {
        width: 48%;
    }
    .ch-hub-title {
        font-size: 39px;
    }
    .ch-hub-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ch-hub-nav-card {
        grid-template-columns: 40% 60%;
    }
    .ch-hub-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .ch-hub-hero {
        position: relative;
        min-height: 430px;
        background-position: 62% center;
    }
    .ch-hub-hero:after {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.93) 52%, rgba(255,255,255,0.28) 100%);
        content: '';
    }
    .ch-hub-hero .container {
        position: relative;
        z-index: 1;
        min-height: 430px;
    }
    .ch-hub-hero-inner {
        width: 78%;
    }
    .ch-hub-title {
        font-size: 36px;
    }
    .ch-hub-section-title {
        font-size: 21px;
    }
    .ch-hub-partnership {
        grid-template-columns: 1fr;
    }
    .ch-hub-partnership-copy {
        padding: 26px;
    }
    .ch-hub-partnership-benefits {
        width: 100%;
    }
    .ch-hub-partnership-visual {
        min-height: 230px;
    }
}

@media (max-width: 479px) {
    .ch-hub-hero,
    .ch-hub-hero .container {
        min-height: 410px;
    }
    .ch-hub-hero {
        background-position: 65% center;
    }
    .ch-hub-hero:after {
        background: linear-gradient(90deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.95) 70%, rgba(255,255,255,0.5) 100%);
    }
    .ch-hub-hero-inner {
        width: 100%;
        padding: 42px 0;
    }
    .ch-hub-title {
        max-width: 310px;
        font-size: 34px;
    }
    .ch-hub-intro {
        max-width: 285px;
        font-size: 13px;
    }
    .ch-hub-nav {
        grid-template-columns: 1fr;
    }
    .ch-hub-nav-card {
        grid-template-columns: 40% 60%;
        min-height: 205px;
    }
    .ch-hub-actions {
        padding-bottom: 36px;
    }
    .ch-hub-support {
        padding: 24px 20px;
    }
    .ch-hub-partnership-benefits {
        grid-template-columns: 1fr;
    }
}

/* Final V4 overrides - intentionally last in cascade. */
.ch-hub-hero {
    border-bottom: 1px solid #e4e4e4;
}
.ch-hub-section {
    padding-top: 42px;
}
.ch-hub-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ch-hub-nav-card,
.ch-hub-nav-card:hover,
.ch-hub-nav-card:focus {
    grid-template-columns: 42% 58%;
    min-height: 245px;
    background: linear-gradient(90deg, #f2f0ee 0%, #f7f6f5 38%, #fff 58%, #fff 100%);
}
.ch-hub-nav-card-body {
    padding: 30px 10px 28px 28px;
}
.ch-hub-nav-card-name {
    max-width: 205px;
    font-size: 18px;
}
.ch-hub-nav-card-media {
    padding: 15px 18px 15px 0;
    background: #fff;
}
.ch-hub-nav-card-media:before {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: -42px;
    width: 70px;
    background: linear-gradient(90deg, rgba(247,246,245,0) 0%, #fff 72%);
    content: '';
    pointer-events: none;
}
.ch-hub-nav-card-media > img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
}
.ch-hub-partnership {
    background: linear-gradient(90deg, #eeecea 0%, #f5f4f3 37%, #fff 68%, #fff 100%);
}
.ch-hub-partnership-copy {
    padding-right: 12px;
}
.ch-hub-partnership-visual {
    margin-left: -72px;
}
.ch-hub-partnership-visual:before {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 145px;
    background: linear-gradient(90deg, #f5f4f3 0%, rgba(255,255,255,.86) 36%, rgba(255,255,255,0) 100%);
    content: '';
    pointer-events: none;
}
.ch-hub-partnership-visual img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 10%, #000 32%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.16) 10%, #000 32%, #000 100%);
}
@media (max-width: 991px) {
    .ch-hub-nav-card,
    .ch-hub-nav-card:hover,
    .ch-hub-nav-card:focus {
        grid-template-columns: 40% 60%;
    }
}
@media (max-width: 767px) {
    .ch-hub-nav {
        grid-template-columns: 1fr;
    }
    .ch-hub-partnership-visual {
        margin-left: 0;
    }
    .ch-hub-partnership-visual:before {
        top: 0;
        right: 0;
        bottom: auto;
        width: auto;
        height: 90px;
        background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
    }
    .ch-hub-partnership-visual img {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
    }
}
@media (max-width: 479px) {
    .ch-hub-nav-card,
    .ch-hub-nav-card:hover,
    .ch-hub-nav-card:focus {
        grid-template-columns: 42% 58%;
        min-height: 215px;
    }
    .ch-hub-nav-card-body {
        padding: 24px 4px 22px 18px;
    }
    .ch-hub-nav-card-name {
        font-size: 15px;
    }
}

/* =========================================================================
   Category tile thumbnail - the single source of truth for tile image size.

   WHY THIS EXISTS: the four source images have four different intrinsic
   ratios (1200x676 = 1.78, 1200x1200 = 1.00, and two 400x284 = 1.41). They
   were rendered with object-fit: contain, which preserves each image's own
   ratio, so every tile letterboxed to a different visual size and the row
   looked ragged. Earlier attempts patched this per grid position
   (:nth-child(3)/(4) shrink hacks in category-hub-fixes.css) - a symptom fix
   that depended on category order and would break on a fifth category.

   THE FIX: an explicit fixed-ratio frame. The frame - not the file - decides
   the shape, and object-fit: cover fills it edge to edge, so any image of any
   ratio renders as the same rectangle. Safe here because none of these images
   has an alpha channel (all RGB, no transparency): cover only trims the long
   edge, it can never expose a transparent margin.

   WHY IT SITS AT THE VERY END: .ch-hub-nav-card* selectors are redefined
   several times in this file and again in category-hub-fixes.css, which is
   loaded after it - so being last in this file is not sufficient on its own.
   The geometry is therefore also pinned by specificity: the rules below are
   (0,2,1) or higher and beat every legacy `.ch-hub-nav-card-media > img` rule
   (0,1,1) wherever it sits. Media queries add no specificity, so the old
   responsive width overrides cannot win either.
   ========================================================================= */
.ch-hub-nav-card-media .ch-hub-nav-card-thumb {
    position: relative;
    z-index: 2; /* above .ch-hub-nav-card-media:before, which is z-index 1 */
    /* ~20% smaller than the previous 90% render, to free vertical room for the copy. */
    width: 72%;
    max-width: 240px;
    max-height: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}

.ch-hub-nav-card-media .ch-hub-nav-card-thumb img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hover: the card lifts, the picture holds perfectly still.
   The picture used to shrink, and not because of a transform - the legacy hover rules dropped the
   image from 100% to 88/90% width. They are dead now (they select `.ch-hub-nav-card-media > img`,
   and the image sits a level deeper), but state it here anyway: nothing about the image reacts to
   hover, and there is no transition on it to animate, so no future rule can quietly start moving
   it again without this being the obvious place to look. */
.ch-hub-nav .ch-hub-nav-card:hover,
.ch-hub-nav .ch-hub-nav-card:focus-visible {
    transform: translateY(-4px);
}

.ch-hub-nav-card .ch-hub-nav-card-thumb img,
.ch-hub-nav-card:hover .ch-hub-nav-card-thumb img,
.ch-hub-nav-card:focus .ch-hub-nav-card-thumb img,
.ch-hub-nav-card:focus-visible .ch-hub-nav-card-thumb img {
    width: 100%;
    max-width: none;
    height: 100%;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ch-hub-nav .ch-hub-nav-card:hover,
    .ch-hub-nav .ch-hub-nav-card:focus-visible {
        transform: none;
    }
}

/* =========================================================================
   Buying guide - how filters differ between devices.
   Reuses the hub's existing card language (border, radius, soft shadow, accent)
   rather than introducing a new visual vocabulary.
   ========================================================================= */
.ch-hub-guide-lead {
    max-width: 62em;
    margin: -6px 0 24px;
    color: var(--ch-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ch-hub-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ch-hub-guide-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    border: 1px solid #e5e5e5;
    border-radius: var(--ch-radius);
    background: linear-gradient(135deg, #fff 0%, #f8f7f6 100%);
    box-shadow: 0 3px 16px rgba(25, 30, 40, 0.045);
}

.ch-hub-guide-card > .fa {
    margin-bottom: 12px;
    color: var(--ch-accent);
    font-size: 22px;
    line-height: 1;
}

.ch-hub-guide-card h3 {
    margin: 0 0 9px;
    color: var(--ch-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.ch-hub-guide-card p {
    margin: 0 0 14px;
    color: var(--ch-muted);
    font-size: 13px;
    line-height: 1.62;
}

.ch-hub-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--ch-accent);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.ch-hub-guide-link:hover,
.ch-hub-guide-link:focus {
    color: #a51800;
    text-decoration: underline;
}

.ch-hub-guide-link .fa {
    transition: transform 0.18s ease;
}

.ch-hub-guide-link:hover .fa {
    transform: translateX(3px);
}

/* =========================================================================
   FAQ. Native <details>/<summary>: the answers are real text in the DOM (the
   FAQPage JSON-LD must mirror content the visitor can actually read) and the
   accordion needs no JavaScript.
   ========================================================================= */
.ch-hub-faq {
    display: grid;
    gap: 10px;
    max-width: 900px;
}

.ch-hub-faq-item {
    overflow: hidden;
    border: 1px solid #e5e5e5;
    border-radius: var(--ch-radius);
    background: #fff;
}

.ch-hub-faq-item[open] {
    border-color: rgba(196, 30, 0, 0.28);
}

.ch-hub-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    color: var(--ch-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none; /* removes the marker in Firefox */
}

/* WebKit/Blink need their own pseudo-element to drop the disclosure triangle. */
.ch-hub-faq-q::-webkit-details-marker {
    display: none;
}

.ch-hub-faq-q:hover,
.ch-hub-faq-item[open] .ch-hub-faq-q {
    color: var(--ch-accent);
}

.ch-hub-faq-q .fa {
    flex: 0 0 auto;
    color: var(--ch-accent);
    transition: transform 0.18s ease;
}

.ch-hub-faq-item[open] .ch-hub-faq-q .fa {
    transform: rotate(180deg);
}

.ch-hub-faq-a {
    padding: 0 20px 18px;
    color: var(--ch-muted);
    font-size: 14px;
    line-height: 1.68;
}

.ch-hub-faq-a p {
    margin: 0;
}

@media (max-width: 991px) {
    .ch-hub-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ch-hub-guide-grid {
        grid-template-columns: 1fr;
    }
    .ch-hub-faq-q {
        padding: 14px 16px;
        font-size: 14px;
    }
    .ch-hub-faq-a {
        padding: 0 16px 16px;
        font-size: 13px;
    }
}

/* =========================================================================
   FAQ: photo beside the questions
   The accordion on its own left the right half of the row empty on desktop.
   ========================================================================= */
.ch-hub-faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 32px;
    align-items: start;
}

.ch-hub-faq-media {
    margin: 0;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    overflow: hidden;
    /* Sticky, so the photo stays beside the questions instead of stranding a column of
       whitespace once the reader opens an answer further down. */
    position: sticky;
    top: 24px;
}

.ch-hub-faq-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 991px) {
    .ch-hub-faq-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .ch-hub-faq-media {
        position: static;
    }
    .ch-hub-faq-media img {
        max-height: 260px;
    }
}