/* Hub Page v0.1 */

/* Prevent scrollbar-induced layout shift when switching tabs */
html:has(.mca-hub-page) { scrollbar-gutter: stable; }

/* wpDiscuz: kill default 50px margin on hub page */
.mca-hub-page #comments { margin: 0; max-width: none; }

/* SEO semantic tags — visual reset (h1/h2/h3 styled via classes, not tags) */
.mca-hub-page h1,
.mca-hub-page h2,
.mca-hub-page h3 {
    all: unset;
    display: block;
}

/* ═══════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════ */
.mca-hub-page {
    --text: #1a1a1a;
    --text-secondary: #555;
    --muted: #888;
    --pale: #aaa;
    --bg: #f3f3f3;
    --content: #ffffff;
    --border: #e0e0e0;
    --border-light: #ebebeb;
    --primary: #e71d1d;
    --primary-soft: #fef2f2;
    --link: #1a0dab;
    --success: #10b981;
    --success-soft: #ecfdf5;
    --warning: #f59e0b;
    --info: #2563eb;
    --info-soft: #eff6ff;
    --warn: #ea580c;
    --warn-soft: #fff7ed;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 10px;
    --radius-sm: 4px;
    --max-w: 1200px;
    --header-h: 48px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.mca-hub-page a { color: var(--link); text-decoration: none; transition: color 0.12s; }
.mca-hub-page a:hover { color: var(--primary); }

/* v0.3.0 Phase 4: убрать двойной margin-block-start от WP FSE block layout.
   :where(.is-layout-flow|constrained) > * добавляли по 24px каждому ребёнку,
   что на хабе складывалось дважды (columns + discussion). Сбрасываем — интервалы
   между секциями берутся из существующего margin на .hub-section в hub.css. */
.mca-hub-page :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }

@media print {
    .hero__nav, .hub-nav-sticky { display: none !important; }
    .hub-section { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════
   HERO — PRODUCT IDENTITY
   ═══════════════════════════════════════════════════ */
.hero {
    max-width: var(--max-w);
    margin-inline: auto;
}

.hero__card {
    background: var(--content);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.hero__row {
    display: flex;
    align-items: stretch;
    max-height: 420px;
}

.hero__img-wrap {
    width: 40%;
    flex-shrink: 0;
    background: var(--content);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.hero__img {
    width: 100%;
    height: 340px;
    object-fit: contain;
    display: block;
    padding: 8px;
    box-sizing: border-box;
}

.hero__img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0,0,0,0.06);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}

.hero__img-wrap:hover .hero__img-nav { opacity: 1; }
.hero__img-nav:hover { background: rgba(0,0,0,0.12); }
.hero__img-nav--prev { left: 6px; }
.hero__img-nav--next { right: 6px; }

.hero__img-nav svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero__gallery {
    flex-shrink: 0;
    display: flex;
    gap: 3px;
    padding: 4px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.hero__gallery::-webkit-scrollbar { height: 3px; }
.hero__gallery::-webkit-scrollbar-track { background: transparent; }
.hero__gallery::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.hero__gallery-thumb {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s;
    border-radius: 0;
}

.hero__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.hero__gallery-thumb.is-active { opacity: 1; }
.hero__gallery-thumb:hover { opacity: 0.7; }

.hero__body {
    flex: 1;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

.hero__body::-webkit-scrollbar { display: none; }

/* Hero Specs Strip */
.hss {
    display: flex;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 8px 0;
}
.hss-item {
    flex: 1;
    padding: 10px 12px;
    text-align: center;
    border-right: 1px solid var(--border-light);
    position: relative;
}
.hss-item:last-child { border-right: none; }
.hss-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.hss-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pale);
    margin-top: 3px;
}
.hss-tip {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--pale);
    font-size: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hss-tip .hss-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: var(--text);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: var(--radius);
    text-align: left;
    pointer-events: none;
    z-index: 100;
    text-transform: none;
    letter-spacing: 0;
}
.hss-tip .hss-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text);
}
.hss-tip:hover .hss-tooltip,
.hss-tip:focus .hss-tooltip { display: block; }

.hero__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero__title-kw {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero__title-name {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.hero__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hero__scores {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

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

.hero__score-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--pale);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 6px;
}

.hero__score-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.hero__score-num--mc { color: var(--primary); }
.hero__score-num--user { color: var(--text); }


/* ── Hub Price Widget — hub-specific overrides ─────────────────── */
/* Base styles in: mychooz-partners/modules/multiwidget/assets/compact.css */

.hero__description {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
}

/* Navigation tabs */
.hero__nav {
    display: flex;
    border-top: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.hero__nav::-webkit-scrollbar { display: none; }

.hero__nav .hero__nav-link,
.hub-nav-sticky .hero__nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.12s ease;
    position: relative;
}

.hero__nav .hero__nav-link:hover,
.hub-nav-sticky .hero__nav-link:hover { color: var(--text); }

/* Focus-visible for keyboard navigation */
.hero__nav-link:focus-visible,
.hero__img-nav:focus-visible {
    outline: 2px solid var(--accent, var(--primary));
    outline-offset: 2px;
}
.hero__img-nav:focus-visible { opacity: 1; }

.hero__nav .hero__nav-link.is-active,
.hub-nav-sticky .hero__nav-link.is-active {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

.hero__nav-badge {
    font-variant-numeric: tabular-nums;
    font-size: 9px;
    font-weight: 500;
    color: var(--pale);
    background: var(--bg);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

.hero__nav-link.is-active .hero__nav-badge {
    color: var(--text);
    background: var(--border);
}

.hero__nav .hero__nav-link.hero__nav-link--accent,
.hub-nav-sticky .hero__nav-link.hero__nav-link--accent {
    color: var(--text);
    font-weight: 600;
}

.hero__nav .hero__nav-link.hero__nav-link--muted,
.hub-nav-sticky .hero__nav-link.hero__nav-link--muted {
    color: var(--pale);
    font-size: 11px;
}

/* Sticky nav clone */
.hub-nav-sticky {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-light);
    transform: translateY(-100%);
    transition: transform 0.2s ease;
    display: flex;
    justify-content: center;
}

.hub-nav-sticky.is-visible { transform: translateY(0); }

.hub-nav-sticky__inner {
    max-width: var(--max-w);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hub-nav-sticky__inner::-webkit-scrollbar { display: none; }
.hub-nav-sticky .hero__nav-link { padding: 10px 14px; }

/* ═══════════════════════════════════════════════════
   CONTENT LAYOUT
   ═══════════════════════════════════════════════════ */
.hub-content {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 16px 24px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

.hub-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 50px);
}

/* Section card */
.hub-section {
    background: var(--content);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.hub-section.is-hidden { display: none; }

.hub-section__head {
    padding: 16px 20px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

.hub-section__head--package { margin-top: 16px; }

.hub-section__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text);
}

.hub-section__count {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--pale);
}

.hub-section__sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 20px 4px;
}

.hub-section__body { padding: 16px 20px; }

.hub-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════
   SPECS
   ═══════════════════════════════════════════════════ */
.specs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.specs-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.specs-table tr:last-child td { border-bottom: none; }
.specs-label { color: var(--muted); width: 30%; }
.specs-value { font-weight: 600; text-align: left; width: 70%; }

/* Priority accents: p1=важные, p2-p4=средние, p5=для галочки */
.specs-p1 { font-size: 14px; }
.specs-p1 .specs-label { color: var(--text); font-weight: 500; }
.specs-p1 .specs-value { font-weight: 700; }
.specs-p4 { font-size: 12px; }
.specs-p4 .specs-label { color: var(--pale); }
.specs-p4 .specs-value { font-weight: 500; color: var(--muted); }
.specs-p5 { font-size: 11px; }
.specs-p5 .specs-label { color: var(--pale); }
.specs-p5 .specs-value { font-weight: 400; color: var(--muted); }

/* ═══════════════════════════════════════════════════
   NEWS
   ═══════════════════════════════════════════════════ */
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: none; padding-bottom: 0; }

.news-date {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--pale);
    width: 56px;
    padding-top: 2px;
}

.news-body { flex: 1; min-width: 0; }

.news-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.news-title a { color: var(--text); }
.news-title a:hover { color: var(--primary); }

.news-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.news-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
}

.news-badge--rumor { background: var(--warn-soft); color: var(--warn); }
.news-badge--official { background: var(--success-soft); color: var(--success); }
.news-badge--update { background: var(--info-soft); color: var(--info); }

/* ═══════════════════════════════════════════════════
   REVIEWS / MEDIA
   ═══════════════════════════════════════════════════ */
.review-editorial {
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.review-editorial__score {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--text);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.review-editorial__body { flex: 1; }

.review-editorial__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
}

.review-editorial__title {
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
}

.review-editorial__verdict {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.review-external {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.review-external:last-child { border-bottom: none; }
.review-external__source { color: var(--muted); }
.review-external__source a { color: var(--text); font-weight: 600; }

.review-external__score {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Videos */
.video-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.video-item:first-child { padding-top: 0; }
.video-item:last-child { border-bottom: none; padding-bottom: 0; }

.video-thumb {
    width: 140px;
    height: 79px;
    flex-shrink: 0;
    background: var(--bg);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.video-thumb__play {
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumb__play::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
}

.video-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.video-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.video-title a { color: var(--text); }
.video-title a:hover { color: var(--primary); }

.video-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   PRICES
   ═══════════════════════════════════════════════════ */
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.price-row:last-child { border-bottom: none; }

.price-store {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-store__name { font-weight: 600; }
.price-store__region { font-size: 10px; color: var(--pale); }

.price-amount {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 500;
}

.price-amount--best { color: var(--success); }

.price-row--best {
    background: var(--success-soft);
    margin: 0 -20px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
}

.price-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}

.price-history {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.price-history__chart {
    height: 60px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--pale);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════
   DISCUSSION — стили коммов теперь в comments-v2.css
   (mychooz-users/modules/comments-v2/assets/css/)
   ═══════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   SIDEBAR: QUICK LINKS
   ═══════════════════════════════════════════════════ */
.quick-links__item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
}

.quick-links__item:last-child { border-bottom: none; }

.quick-links__item a {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    justify-content: space-between;
}

.quick-links__item a:hover { color: var(--primary); }
.quick-links__arrow { color: var(--pale); font-size: 11px; }
.quick-links__item--muted { color: var(--pale); cursor: default; font-size: 12px; }
.quick-links__item--views { color: var(--muted); font-size: 13px; pointer-events: none; }

/* ═══════════════════════════════════════════════════
   ACCESSORIES
   ═══════════════════════════════════════════════════ */
.accessories-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
}
.accessories-list__item:last-child { border-bottom: none; }
.accessories-list__name { font-size: 13px; font-weight: 500; color: var(--text); }
.accessories-list__link { font-size: 12px; font-weight: 500; color: var(--primary); white-space: nowrap; }
.accessories-list__soon { font-size: 11px; color: var(--pale); }

/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hub-content { grid-template-columns: 1fr; }
    .hub-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    #main-content:has(.mca-hub-page) { --wp--style--root--padding-left: 0px; --wp--style--root--padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
    .hero { padding: 0; margin-top: 0; }
    .hero__card { border-radius: 0; border-left: 0; border-right: 0; }

    /* Stacked hero: title → scores → image → prices → specs */
    .hero__row { flex-direction: column; max-height: none; }
    .hero__body { display: contents; }
    .hero__top { order: 1; flex-direction: column; gap: 8px; padding: 12px 16px 8px; }
    .hero__img-wrap { order: 2; width: 100%; }
    .hero__row .hpw { order: 3; margin: 16px 8px; }
    .hero__row .hss { order: 4; margin: 8px 16px; }

    /* Gallery arrows visible on touch (no hover) */
    .hero__img-nav { opacity: 0.5; }

    .hero__img { padding: 8px; }
    .hero__gallery-thumb { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .hero__gallery-thumb img { width: 28px; height: 28px; }
    .hero__gallery { padding: 4px 8px; gap: 3px; }
    .hero__title-name { font-size: 24px; }
    .hero__title-kw { font-size: 10px; }
    .hero__score-num { font-size: 24px; }
    .hero__nav-link { padding: 9px 12px; font-size: 11px; min-height: 44px; }

    /* Non-hero */
    .hub-content { padding: 12px 0 60px; gap: 8px; }
    .hub-section { border-radius: 0; border-left: 0; border-right: 0; }
    .hub-sidebar { grid-template-columns: 1fr; gap: 8px; }
    .hub-nav-sticky__inner { padding: 0 12px; }
    .video-thumb { width: 110px; height: 62px; }
    .review-editorial { flex-direction: column; text-align: center; }
    .price-row--best { margin: 0 -16px; padding: 10px 16px; }
    .hub-section__body { padding: 14px 16px; }
    .hub-section__head { padding: 14px 16px 10px; }
}

/* wpDiscuz fix v0.1: соц-иконки логина в inline SVG без размеров → берут natural из viewBox.
   Временно, пока используем wpDiscuz на хабе вместо своих комментов. */
.hub-section .wpdsn,
.hub-section .wpd-social-login {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	flex-wrap: wrap;
}
.hub-section .wpdsn {
	margin-right: 6px;
}
.hub-section .wpdsn i {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.hub-section .wpdsn i svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.hub-section .wpd-connect-with {
	font-size: 13px;
	margin-right: 4px;
	opacity: 0.7;
}

/* Discussion section head — центр + счётчик-бейдж рядом с заголовком */
#discussion .hub-section__head {
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	text-align: center;
}
#discussion .hub-section__title {
	font-size: 14px;
}
#discussion .hub-section__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 8px;
	border-radius: 11px;
	background: var(--bg-soft, rgba(0,0,0,0.06));
	color: var(--text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   CPT mc_hub — двухколоночный layout с sticky sidebar
   ═══════════════════════════════════════════════════════════════ */
.mca-hub-cols {
	gap: 24px;
	align-items: flex-start;
}
.mca-hub-side-col {
	position: sticky;
	top: calc(var(--header-h, 60px) + 16px);
	align-self: flex-start;
}
.mca-hub-side-col .hub-sidebar {
	padding: 0;
}

@media (max-width: 900px) {
	.mca-hub-cols { flex-direction: column; }
	.mca-hub-main-col, .mca-hub-side-col {
		flex-basis: 100% !important;
		position: static;
	}
}