/* ──────────────────────────────────────────────────────────────
   WP Category Grid — Frontend Styles
────────────────────────────────────────────────────────────── */

/* Full-bleed sections use 100vw, which includes the vertical scrollbar
   width and would otherwise create a phantom horizontal scrollbar on
   desktop. `clip` removes it without breaking position: sticky. */
html:has(.wcg-section) {
    overflow-x: clip;
}

/* ── Section ──────────────────────────────────────────────────── */
.wcg-section {
    background-color: var(--wcg-bg, var(--brand-color-bg-white, var(--wpc-surface, #ffffff)));
    padding-top:    var(--wcg-pad-top,    40px);
    padding-bottom: var(--wcg-pad-bottom, 40px);
    box-sizing: border-box;
    /* Full-bleed: breaks out of any page builder container */
    width: 100vw;
    /* Negate Elementor (and similar page builders) padding-block-start/end.
       These CSS vars are set on .e-con-inner and inherited by descendants.
       Fallback 0px means no side-effect when the vars are not defined. */
    margin-top:    calc(-1 * var(--padding-block-start, 0px));
    margin-bottom: calc(-1 * var(--padding-block-end,   0px));
    margin-left: calc(50% - 50vw);
    overflow-x: clip;
}

@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .wcg-section {
        padding-top:    var(--wcg-pad-top-tab,    var(--wcg-pad-top,    30px));
        padding-bottom: var(--wcg-pad-bottom-tab, var(--wcg-pad-bottom, 30px));
    }
}

@media ( max-width: 768px ) {
    .wcg-section {
        padding-top:    var(--wcg-pad-top-mob,    var(--wcg-pad-top,    20px));
        padding-bottom: var(--wcg-pad-bottom-mob, var(--wcg-pad-bottom, 20px));
    }
}

/* ── Optional heading above grid ─────────────────────────────── */
.wcg-section-heading {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 20px;
}

.wcg-section-title {
    margin: 0 0 6px;
    font-family: var(--wcg-sec-title-ff, inherit);
    text-transform: var(--wcg-sec-title-transform, none);
    font-size: var(--wcg-sec-title-size, 22px);
    font-weight: var(--wcg-sec-title-weight, 700);
    text-align: var(--wcg-sec-title-align, center);
    letter-spacing: var(--wcg-sec-title-ls, 0);
    color: var(--wcg-sec-title-color, #1a1a1a);
    line-height: 1.2;
}

.wcg-section-subtitle {
    margin: 0;
    font-family: var(--wcg-sec-sub-ff, inherit);
    text-transform: var(--wcg-sec-sub-transform, none);
    font-size: var(--wcg-sec-sub-size, 14px);
    font-weight: var(--wcg-sec-sub-weight, 400);
    text-align: var(--wcg-sec-sub-align, center);
    letter-spacing: var(--wcg-sec-sub-ls, 0);
    color: var(--wcg-sec-sub-color, #666666);
}

/* ── Grid ─────────────────────────────────────────────────────── */
/* Flexbox so justify-content centres every row independently,
   including partial last rows (CSS Grid only centres the track block). */
.wcg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wcg-gap, 12px);
    padding: 0 var(--wcg-pad-right, 20px) 0 var(--wcg-pad-left, 20px);
    box-sizing: border-box;
}

@media ( max-width: 768px ) {
    .wcg-grid {
        gap: var(--wcg-gap-mob, var(--wcg-gap, 8px));
        padding: 0 var(--wcg-pad-right-mob, var(--wcg-pad-right, 12px)) 0 var(--wcg-pad-left-mob, var(--wcg-pad-left, 12px));
    }
}

@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .wcg-grid {
        padding: 0 var(--wcg-pad-right-tab, var(--wcg-pad-right, 16px)) 0 var(--wcg-pad-left-tab, var(--wcg-pad-left, 16px));
        gap: var(--wcg-gap-tab, var(--wcg-gap, 10px));
    }
}

/* ── Item ─────────────────────────────────────────────────────── */
.wcg-item {
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    /* Fixed flex-basis keeps item size exact regardless of container width */
    flex: 0 0 var(--wcg-size-desk, 150px);
}
.wcg-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wcg-shape-rectangle .wcg-item {
    flex: 0 0 var(--wcg-rect-w-desk, 200px);
}

@media ( max-width: 768px ) {
    .wcg-item {
        flex: 0 0 var(--wcg-size-mob, 120px);
    }
    .wcg-shape-rectangle .wcg-item {
        flex: 0 0 var(--wcg-rect-w-mob, 160px);
    }
}

@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .wcg-item {
        flex: 0 0 var(--wcg-size-tab, var(--wcg-size-desk, 135px));
    }
    .wcg-shape-rectangle .wcg-item {
        flex: 0 0 var(--wcg-rect-w-tab, var(--wcg-rect-w-desk, 180px));
    }
}

/* ── Item visual ───────────────────────────────────────────── */
.wcg-item-visual {
    position: relative;
    width: var(--wcg-size-desk, 150px);
    height: var(--wcg-size-desk, 150px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--wcg-radius, 0px);
    border: var(--wcg-border-width, 0px) solid var(--wcg-border-color, #e2e2e2);
    box-sizing: border-box;
    background: #f0f0f0;
}

/* Rectangle uses separate width/height setting */
.wcg-shape-rectangle .wcg-item-visual {
    width: 100%;
    height: var(--wcg-rect-h-desk, 150px);
}

@media ( max-width: 768px ) {
    .wcg-item-visual {
        width: var(--wcg-size-mob, 120px);
        height: var(--wcg-size-mob, 120px);
    }
    .wcg-shape-rectangle .wcg-item-visual {
        width: 100%;
        height: var(--wcg-rect-h-mob, 120px);
    }
}

@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .wcg-item-visual {
        width: var(--wcg-size-tab, var(--wcg-size-desk, 135px));
        height: var(--wcg-size-tab, var(--wcg-size-desk, 135px));
    }
    .wcg-shape-rectangle .wcg-item-visual {
        width: 100%;
        height: var(--wcg-rect-h-tab, var(--wcg-rect-h-desk, 135px));
    }
}

/* ── Image ────────────────────────────────────────────────────── */
.wcg-item-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s ease;
}

.wcg-item:hover .wcg-item-img {
    transform: scale( var(--wcg-zoom, 1.06) );
}

/* ── Overlay ──────────────────────────────────────────────────── */
.wcg-item-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: background 0.3s ease;
    border-radius: inherit;
}

/* Solid overlay */
.wcg-overlay-solid .wcg-item-overlay {
    background: var(--wcg-ov-base, rgba(0,0,0,0.4));
}

.wcg-overlay-solid .wcg-item:hover .wcg-item-overlay {
    background: var(--wcg-ov-hover, rgba(0,0,0,0.55));
}

/* Gradient overlay — dark fade from bottom */
.wcg-overlay-gradient .wcg-item-overlay {
    background: linear-gradient(
        to top,
        var(--wcg-ov-base, rgba(0,0,0,0.5))  0%,
        var(--wcg-ov-zero, rgba(0,0,0,0))    65%
    );
}

.wcg-overlay-gradient .wcg-item:hover .wcg-item-overlay {
    background: linear-gradient(
        to top,
        var(--wcg-ov-hover, rgba(0,0,0,0.65)) 0%,
        var(--wcg-ov-zero,  rgba(0,0,0,0))    65%
    );
}

/* ── Text (inside — over image) ───────────────────────────────── */
.wcg-text-inside .wcg-item-text {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
}

/* Vertical position */
.wcg-text-v-top    .wcg-item-text { top: 0; }
.wcg-text-v-middle .wcg-item-text { top: 50%; transform: translateY(-50%); }
.wcg-text-v-bottom .wcg-item-text { bottom: 0; }

/* ── Text (outside — below image) ────────────────────────────── */
.wcg-text-outside .wcg-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 4px 0;
}

/* ── Common text styles ───────────────────────────────────────── */
.wcg-item-title {
    display: block;
    color: var(--wcg-text-color, #ffffff);
    font-family: var(--wcg-font-family, inherit);
    font-size: var(--wcg-font-size, 13px);
    font-weight: var(--wcg-font-weight, 600);
    letter-spacing: var(--wcg-letter-spacing, 1px);
    text-transform: var(--wcg-text-transform, uppercase);
    text-align: var(--wcg-text-align-desk, var(--wcg-text-align, center));
    line-height: 1.3;
}

.wcg-item-subtitle {
    display: block;
    color: var(--wcg-sub-color, rgba(255,255,255,0.8));
    font-family: var(--wcg-sub-font-family, inherit);
    font-size: var(--wcg-sub-font-size, 11px);
    font-weight: var(--wcg-sub-font-weight, 400);
    letter-spacing: var(--wcg-sub-letter-spacing, 0);
    text-transform: var(--wcg-sub-text-transform, none);
    text-align: var(--wcg-sub-text-align-desk, var(--wcg-text-align, center));
    line-height: 1.3;
}

/* Outside placement: title/subtitle inherit page text color by default */
.wcg-text-outside .wcg-item-title {
    color: var(--wcg-text-color, #222222);
}

.wcg-text-outside .wcg-item-subtitle {
    color: var(--wcg-sub-color, #666666);
}

/* ── Tablet font sizes ────────────────────────────────────────── */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .wcg-item-title {
        font-size: var(--wcg-font-size-tab, var(--wcg-font-size, 12px));
        font-weight: var(--wcg-font-weight-tab, var(--wcg-font-weight, 600));
        letter-spacing: var(--wcg-letter-spacing-tab, var(--wcg-letter-spacing, 0.8px));
        text-align: var(--wcg-text-align-tab, var(--wcg-text-align, center));
    }
    .wcg-item-subtitle {
        font-size: var(--wcg-sub-font-size-tab, var(--wcg-sub-font-size, 10px));
        font-weight: var(--wcg-sub-font-weight-tab, var(--wcg-sub-font-weight, 400));
        letter-spacing: var(--wcg-sub-letter-spacing-tab, var(--wcg-sub-letter-spacing, 0));
        text-align: var(--wcg-sub-text-align-tab, var(--wcg-text-align, center));
    }
    .wcg-section-title {
        font-size: var(--wcg-sec-title-tab-size, var(--wcg-sec-title-size, 20px));
        font-weight: var(--wcg-sec-title-tab-weight, var(--wcg-sec-title-weight, 700));
        text-align: var(--wcg-sec-title-tab-align, var(--wcg-sec-title-align, center));
        letter-spacing: var(--wcg-sec-title-tab-ls, var(--wcg-sec-title-ls, 0));
    }
    .wcg-section-subtitle {
        font-size: var(--wcg-sec-sub-tab-size, var(--wcg-sec-sub-size, 13px));
        font-weight: var(--wcg-sec-sub-tab-weight, var(--wcg-sec-sub-weight, 400));
        text-align: var(--wcg-sec-sub-tab-align, var(--wcg-sec-sub-align, center));
        letter-spacing: var(--wcg-sec-sub-tab-ls, var(--wcg-sec-sub-ls, 0));
    }
}

/* ── Mobile font sizes ────────────────────────────────────────── */
@media ( max-width: 768px ) {
    .wcg-item-title {
        font-size: var(--wcg-font-size-mob, 11px);
        font-weight: var(--wcg-font-weight-mob, var(--wcg-font-weight, 600));
        letter-spacing: var(--wcg-letter-spacing-mob, var(--wcg-letter-spacing, 0.5px));
        text-align: var(--wcg-text-align-mob, var(--wcg-text-align, center));
    }
    .wcg-item-subtitle {
        font-size: var(--wcg-sub-font-size-mob, var(--wcg-sub-font-size, 9px));
        font-weight: var(--wcg-sub-font-weight-mob, var(--wcg-sub-font-weight, 400));
        letter-spacing: var(--wcg-sub-letter-spacing-mob, var(--wcg-sub-letter-spacing, 0));
        text-align: var(--wcg-sub-text-align-mob, var(--wcg-text-align, center));
    }
    .wcg-section-title {
        font-size: var(--wcg-sec-title-mob-size, var(--wcg-sec-title-size, 18px));
        font-weight: var(--wcg-sec-title-mob-weight, var(--wcg-sec-title-weight, 700));
        text-align: var(--wcg-sec-title-mob-align, var(--wcg-sec-title-align, center));
        letter-spacing: var(--wcg-sec-title-mob-ls, var(--wcg-sec-title-ls, 0));
    }
    .wcg-section-subtitle {
        font-size: var(--wcg-sec-sub-mob-size, var(--wcg-sec-sub-size, 12px));
        font-weight: var(--wcg-sec-sub-mob-weight, var(--wcg-sec-sub-weight, 400));
        text-align: var(--wcg-sec-sub-mob-align, var(--wcg-sec-sub-align, center));
        letter-spacing: var(--wcg-sec-sub-mob-ls, var(--wcg-sec-sub-ls, 0));
    }
}

/* ── Horizontal scroll mode ──────────────────────────────────── */

/* Override the base section's overflow-x:clip so the inner scroll-outer
   provides visual containment instead. Without this, iOS Safari treats the
   clipped ancestor as the scroll boundary and the inner grid can't scroll. */
.wcg-has-scroll {
    overflow-x: visible;
}

.wcg-scroll-outer {
    position: relative;
    overflow: hidden; /* visually clips the track + enables proper scroll detection */
}

/* Scrollable track: no wrapping, snapping, hidden native scrollbar */
.wcg-has-scroll .wcg-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: var(--wcg-pad-left, 20px);
}

@media ( max-width: 768px ) {
    .wcg-has-scroll .wcg-grid {
        scroll-padding-left: var(--wcg-pad-left-mob, var(--wcg-pad-left, 12px));
    }
}

.wcg-has-scroll .wcg-grid::-webkit-scrollbar {
    display: none;
}

/* padding-right is ignored at the scroll terminus in most browsers;
   an ::after spacer ensures the last item gets its breathing room */
.wcg-has-scroll .wcg-grid::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: var(--wcg-pad-left, 20px);
}

.wcg-has-scroll .wcg-grid::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: var(--wcg-pad-right, 20px);
}

@media ( max-width: 768px ) {
    .wcg-has-scroll .wcg-grid::before {
        width: var(--wcg-pad-left-mob, var(--wcg-pad-left, 12px));
    }
    .wcg-has-scroll .wcg-grid::after {
        width: var(--wcg-pad-right-mob, var(--wcg-pad-right, 12px));
    }
}

/* Each item snaps to the left edge on scroll */
.wcg-has-scroll .wcg-item {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ── Scroll arrow buttons ────────────────────────────────────── */
/* All selectors are scoped to .wcg-section to beat block-theme global
   element styles such as .wp-site-blocks button { border/color } which
   have specificity (0,1,1) and would otherwise override (0,1,0) rules. */
.wcg-section .wcg-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    cursor: pointer;
    color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    padding: 0;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.wcg-section .wcg-scroll-btn:hover:not(:disabled):not(.wcg-btn-hidden),
.wcg-section .wcg-scroll-btn:active:not(:disabled):not(.wcg-btn-hidden) {
    background: var(--wcg-indicator-color, #000000);
    color: #ffffff;
    border-color: var(--wcg-indicator-color, #000000);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.06);
}

.wcg-section .wcg-scroll-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Disabled (at start / end) — dimmed so user sees the boundary */
.wcg-section .wcg-scroll-btn:disabled,
.wcg-section .wcg-scroll-btn.wcg-btn-hidden {
    opacity: 0.25;
    pointer-events: none;
}

/* Arrow position — centered on the image area, not the full card (image + text).
   top: half the image height, then translateY(-50%) centres the button on that axis. */
.wcg-section .wcg-scroll-prev { left: 10px; top: calc( var(--wcg-size-desk, 150px) / 2 ); }
.wcg-section .wcg-scroll-next { right: 10px; top: calc( var(--wcg-size-desk, 150px) / 2 ); }

/* Rectangle shape uses a separate height variable */
.wcg-section.wcg-shape-rectangle .wcg-scroll-prev,
.wcg-section.wcg-shape-rectangle .wcg-scroll-next { top: calc( var(--wcg-rect-h-desk, 150px) / 2 ); }

@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .wcg-section .wcg-scroll-prev,
    .wcg-section .wcg-scroll-next { top: calc( var(--wcg-size-tab, 135px) / 2 ); }

    .wcg-section.wcg-shape-rectangle .wcg-scroll-prev,
    .wcg-section.wcg-shape-rectangle .wcg-scroll-next { top: calc( var(--wcg-rect-h-tab, 135px) / 2 ); }
}

@media ( max-width: 768px ) {
    .wcg-section .wcg-scroll-prev,
    .wcg-section .wcg-scroll-next { top: calc( var(--wcg-size-mob, 120px) / 2 ); }

    .wcg-section.wcg-shape-rectangle .wcg-scroll-prev,
    .wcg-section.wcg-shape-rectangle .wcg-scroll-next { top: calc( var(--wcg-rect-h-mob, 120px) / 2 ); }
}

/* Arrows visible on all devices including touch/mobile */
/* ── Dot indicators ──────────────────────────────────────────── */
.wcg-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 0 0;
    margin: 0;
    list-style: none;
}

.wcg-section .wcg-dot {
    /* Hard-reset browser button defaults — scoped to .wcg-section to
       beat block-theme global .wp-site-blocks button rules */
    -webkit-appearance: none;
    appearance: none;
    background: var(--wcg-indicator-color, #000000);
    opacity: 0.25;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 19px;
    margin: -19px;
    cursor: pointer;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 99px;
    transition: opacity 0.22s ease, width 0.22s ease;
}

.wcg-section .wcg-dot[aria-selected="true"] {
    opacity: 0.7;
    width: 16px;
}

/* ── Scroll bar indicator ────────────────────────────────────── */
/* Track bg lives in ::before so its opacity is independent of the
   thumb's opacity (children inherit parent opacity multiplicatively). */
.wcg-scroll-bar-track {
    height: 2px;
    position: relative;
    border-radius: 99px;
    max-width: 80px;
    margin: 10px auto 0;
}

.wcg-scroll-bar-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wcg-indicator-color, #000000);
    opacity: 0.15;
    border-radius: 99px;
}

.wcg-scroll-bar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--wcg-indicator-color, #000000);
    opacity: 0.5;
    border-radius: 99px;
    transition: left 0.08s linear;
}

/* ── Circular Scroll Preset ───────────────────────────────────── */
.wcg-preset-circular-scroll .wcg-item-visual {
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.wcg-preset-circular-scroll .wcg-item:hover .wcg-item-visual {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.wcg-preset-circular-scroll .wcg-item-img {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.wcg-preset-circular-scroll .wcg-item-text {
    text-align: center !important;
    margin-top: 8px;
    padding: 0 4px;
}

.wcg-preset-circular-scroll .wcg-item-title {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    color: var(--wpc-on-surface, #1a1a1a) !important;
    text-align: center !important;
}

.wcg-preset-circular-scroll .wcg-item-subtitle {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--wpc-on-surface-muted, #555555) !important;
    margin-top: 2px !important;
    text-align: center !important;
}

/* Hide indicators when items fit without horizontal overflow */
.wcg-dots.wcg-dots-hidden,
.wcg-scroll-bar-track.wcg-dots-hidden {
    display: none !important;
}

/* ── Focus visible ─────────────────────────────────────────────── */
.wcg-item:focus-visible,
.wcg-scroll-btn:focus-visible,
.wcg-dot:focus-visible,
.wcg-scroll-bar-thumb:focus-visible {
    outline: 3px solid -webkit-focus-ring-color;
    outline-offset: 2px;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wcg-item,
    .wcg-item-img-inner,
    .wcg-item-label,
    .wcg-item-overlay,
    .wcg-scroll-btn,
    .wcg-dot,
    .wcg-scroll-bar-thumb {
        transition: none !important;
        animation: none !important;
    }
    .wcg-has-scroll .wcg-grid {
        scroll-snap-type: none;
    }
}

/* =============================================================
   DARK MODE — consumes shared --wpc-* tokens from wp-brand-assets.
   Category tiles are image-driven; this only re-tones the section
   headings, below-image labels, scroll arrows and pagination dots.
   ============================================================= */

/* Section headings and category labels are admin-configured via
   --brand-color-* tokens (which carry their own dark_value), so they
   adapt automatically — no dark override needed here. */
[data-theme="dark"] .wcg-item-img-placeholder,
[data-theme="dark"] .wcg-item-img-inner {
    background: var(--wpc-surface-3);
}
[data-theme="dark"] .wcg-section .wcg-scroll-btn {
    background: var(--wpc-surface-2);
    border-color: var(--wpc-border);
    color: var(--wpc-on-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .wcg-section .wcg-scroll-btn:hover:not(:disabled):not(.wcg-btn-hidden),
[data-theme="dark"] .wcg-section .wcg-scroll-btn:active:not(:disabled):not(.wcg-btn-hidden) {
    background: var(--wpc-accent);
    color: var(--wpc-accent-contrast);
    border-color: var(--wpc-accent);
}
[data-theme="dark"] .wcg-section .wcg-dot {
    background: var(--wpc-on-surface-muted);
    opacity: 0.4;
}
[data-theme="dark"] .wcg-section .wcg-dot[aria-selected="true"] {
    background: var(--wpc-on-surface);
    opacity: 1;
}

/* ── Dark-mode coverage: image placeholder surface ─────────────── */
[data-theme="dark"] .wcg-item-visual {
    background: var(--wpc-surface-2);
}