/**
 * Product category description polish.
 *
 * Top: short editorial intro (first heading + paragraph of the term
 * description). Bottom: "category guide" panel with the remaining sections.
 * The short yellow bar under headings is the shared motif that ties the
 * two halves together; palette stays on Electro's stock tokens.
 */

.cw-cat-intro,
.cw-cat-guide {
    --cw-catd-accent: #fed700;
    --cw-catd-heading: #333e48;
    --cw-catd-body: #4d5964;
    --cw-catd-muted: #75808c;
    --cw-catd-border: #e5e8eb;
    --cw-catd-panel-bg: #f7f8f9;
}

/* ---------------------------------------------------------------------
 * Intro (above the catalog)
 * ------------------------------------------------------------------- */

.cw-cat-intro {
    max-width: 1040px;
    margin: 4px 0 34px;
}

.cw-cat-intro h2 {
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 14px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--cw-catd-heading);
}

.cw-cat-intro h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--cw-catd-accent);
}

.cw-cat-intro p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--cw-catd-body);
}

.cw-cat-intro > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Guide panel (below the catalog)
 * ------------------------------------------------------------------- */

.cw-cat-guide {
    margin: 44px 0 10px;
    padding: 34px 40px 32px;
    background: var(--cw-catd-panel-bg);
    border: 1px solid var(--cw-catd-border);
    border-radius: 6px;
}

.cw-cat-guide__eyebrow {
    margin: 0 0 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cw-catd-muted);
}

.cw-cat-guide__eyebrow span {
    color: var(--cw-catd-heading);
}

.cw-cat-guide h2,
.cw-cat-guide h3 {
    position: relative;
    margin: 30px 0 14px;
    padding: 0 0 12px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--cw-catd-heading);
}

.cw-cat-guide h2::after,
.cw-cat-guide h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: var(--cw-catd-accent);
}

.cw-cat-guide__eyebrow + h2,
.cw-cat-guide__eyebrow + h3 {
    margin-top: 0;
}

.cw-cat-guide p {
    margin: 0 0 15px;
    max-width: 1040px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--cw-catd-body);
}

.cw-cat-guide ul,
.cw-cat-guide ol {
    margin: 0 0 15px;
    padding-left: 22px;
}

/* Marker resets belong on the li — the injected wp-custom-css targets li
 * elements directly, so ul-level rules would lose. */
.cw-cat-guide li {
    max-width: 1040px;
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cw-catd-body);
    list-style: disc outside;
}

.cw-cat-guide > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {
    .cw-cat-intro {
        margin: 0 0 26px;
    }

    .cw-cat-intro h2 {
        font-size: 22px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .cw-cat-intro p {
        font-size: 15px;
        line-height: 1.7;
    }

    .cw-cat-guide {
        margin-top: 32px;
        padding: 24px 20px 22px;
    }

    .cw-cat-guide__eyebrow {
        margin-bottom: 18px;
    }

    .cw-cat-guide h2,
    .cw-cat-guide h3 {
        font-size: 17px;
        margin: 24px 0 12px;
    }

    .cw-cat-guide p,
    .cw-cat-guide li {
        font-size: 14px;
    }
}