/*
 * CMC Cloner — Cloned page styles.
 *
 * Monochrome design system. No primary color anywhere — text is near-black,
 * sub-titles muted gray, backgrounds white with subtle gray-50 tints, borders
 * light gray. Eliminates the readability risk that came from the user-
 * configurable primary color (light primaries previously washed out text on
 * accent backgrounds). Refer to `cloned.css.bak` for the previous version.
 *
 * Conventions:
 *  - All sizes in px; spacing scale via CSS custom properties.
 *  - Border-radius 8 / 12 / 16 px (soft modern).
 *  - Typography: system stack (no Google Fonts) for fast first paint.
 *  - Layout alignment per skeleton variant is centralized in section 19.
 */

/* =====================================================================
 * 1. Design tokens
 * ===================================================================== */
:root {
    --cmc-text:           #111111;
    --cmc-text-muted:     #333;
    --cmc-text-soft:      #a8a8a8;
    --cmc-bg:             #ffffff;
    --cmc-bg-subtle:      #f9fafb;
    --cmc-border:         #e5e7eb;
    --cmc-border-strong:  #d1d5db;
    --cmc-radius-sm:      8px;
    --cmc-radius-md:      12px;
    --cmc-radius-lg:      16px;
    --cmc-radius-pill:    999px;
    --cmc-space-xs:       8px;
    --cmc-space-sm:       16px;
    --cmc-space-md:       24px;
    --cmc-space-lg:       32px;
    --cmc-space-xl:       48px;
    --cmc-space-2xl:      64px;
}

/* =====================================================================
 * 2. Base typography (scoped to .cmc-section so we don't bleed into theme)
 * ===================================================================== */
.cmc-section {
    color: var(--cmc-text);
    background: var(--cmc-bg);
}
.cmc-section *,
.cmc-section *::before,
.cmc-section *::after { box-sizing: border-box; }

.cmc-section h1,
.cmc-section h2,
.cmc-section h3,
.cmc-section h4 {
    color: var(--cmc-text);
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    font-weight: 600;
}
.cmc-section h1 {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.cmc-section h2 {
    font-size: 22px;
    line-height: 1.3;
    margin-top: var(--cmc-space-lg);
}
.cmc-section h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-top: var(--cmc-space-md);
}
.cmc-section p {
    color: var(--cmc-text);
    line-height: 1.65;
    margin: 0 0 var(--cmc-space-sm);
    font-size: 16px;
}
.cmc-section ul,
.cmc-section ol {
    color: var(--cmc-text);
    line-height: 1.65;
    margin: 0 0 var(--cmc-space-sm);
    padding-left: 22px;
}
.cmc-section ul li,
.cmc-section ol li { margin-bottom: 4px; }
.cmc-section strong {
    font-weight: 600;
    color: var(--cmc-text);
}
.cmc-section a {
    color: var(--cmc-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--cmc-border-strong);
    transition: text-decoration-color 150ms ease;
}
.cmc-section a:hover { text-decoration-color: var(--cmc-text); }

/* =====================================================================
 * 3. Layout containers
 * ===================================================================== */
.cmc-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
.cmc-container--narrow { max-width: 760px; }

/* =====================================================================
 * 4. Page title / lead / eyebrow / accent bar
 * ===================================================================== */
.cmc-page-title {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--cmc-space-sm);
    color: var(--cmc-text);
}
.cmc-page-title--editorial {
    font-weight: 600;
    letter-spacing: -0.015em;
}
.cmc-section-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 var(--cmc-space-sm);
}
.cmc-lead {
    color: var(--cmc-text-muted);
    font-size: 17px;
    line-height: 1.55;
    margin: 0 auto var(--cmc-space-md);
    max-width: 680px;
}
/* Editorial lead (skel-4 narrow) keeps left-edge anchoring — no auto-center
 * since the container itself is narrow and left-aligned. */
.cmc-lead--editorial {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}
.cmc-lead--editorial {
    color: var(--cmc-text-muted);
    font-size: 17px;
    line-height: 1.6;
}
.cmc-eyebrow {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cmc-text-muted);
    margin: 0 0 6px;
}
/* Tighten the gap between an eyebrow and the heading directly following it.
 * Applies to hero ("CONTACT XXX" → page title) and subsections
 * ("ALL THE DETAILS" → "How to reach us") consistently. */
.cmc-eyebrow + h1,
.cmc-eyebrow + h2,
.cmc-eyebrow + h3,
.cmc-eyebrow + .cmc-page-title,
.cmc-eyebrow + .cmc-section-title,
.cmc-values-head .cmc-eyebrow + h2,
.cmc-values-head .cmc-eyebrow + h3 { margin-top: 0; }

/* WordPress's wpautop filter can inject empty <p>s between sibling blocks
 * and (when the eyebrow was a <span>) emit an orphan </p> that the browser
 * recovers into <p></p>. Eyebrows are now <div>s in every skeleton so the
 * orphan path no longer fires, but we keep these rules as a defence-in-
 * depth net for legacy stored content + custom skeleton overrides:
 *   1. Hide all empty <p>s inside .cmc-section / .cmc-v2-policy.
 *   2. Collapse the margin of any stray <p> wrapping a lone eyebrow. */
.cmc-section p:empty,
.cmc-v2-policy p:empty { display: none; }
.cmc-section p:has(> .cmc-eyebrow:only-child),
.cmc-values-head p {
    margin: 0 0 6px;
    padding: 0;
}
.cmc-values-head h2,
.cmc-values-head h3 { margin-top: 0; }
.cmc-accent-bar {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--cmc-border-strong);
    margin: 0 0 var(--cmc-space-sm);
    border: 0;
}

/* =====================================================================
 * 5. Hero variants
 * ===================================================================== */
.cmc-policy-hero,
.cmc-about-hero,
.cmc-contact-hero {
    padding-top: var(--cmc-space-xl);
    padding-bottom: var(--cmc-space-lg);
}
.cmc-hero--rich .cmc-container,
.cmc-hero--soft .cmc-container { text-align: center; }
.cmc-hero--soft { background: var(--cmc-bg-subtle); }
/* Flex containers ignore text-align on parent — explicit center for chip rows
 * so they line up under centered titles/leads in soft/rich heros. */
.cmc-hero--rich .cmc-hero-chips,
.cmc-hero--rich .cmc-doc-meta,
.cmc-hero--soft .cmc-hero-chips,
.cmc-hero--soft .cmc-doc-meta { justify-content: center; }
.cmc-hero--split .cmc-container { text-align: left; }
.cmc-variant--editorial {
    padding-top: var(--cmc-space-xl);
    padding-bottom: var(--cmc-space-lg);
}
.cmc-variant--editorial .cmc-container,
.cmc-variant--editorial .cmc-container--narrow { text-align: left; }

/* =====================================================================
 * 6. Doc-meta pills & hero chips
 * ===================================================================== */
.cmc-doc-meta,
.cmc-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--cmc-space-xs) 0 0;
}
.cmc-doc-meta--compact,
.cmc-hero-chips--compact { gap: 6px; }
.cmc-doc-meta__pill,
.cmc-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--cmc-bg-subtle);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-pill);
    font-size: 13px;
    color: var(--cmc-text);
    line-height: 1.4;
}
.cmc-doc-meta__key,
.cmc-hero-chip__key {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cmc-text-muted);
}

.cmc-editorial-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: var(--cmc-space-sm) 0;
    font-size: 14px;
    color: var(--cmc-text-muted);
}
.cmc-editorial-meta__item { display: inline-block; }

/* =====================================================================
 * 7. Effective Date
 * ===================================================================== */
.cmc-effective-date {
    margin: var(--cmc-space-sm) 0 var(--cmc-space-md);
    font-size: 14px;
    color: var(--cmc-text-muted);
}
.cmc-effective-date strong { color: var(--cmc-text); }

/* =====================================================================
 * 8. Sections
 * ===================================================================== */
.cmc-policy-section,
.cmc-faq-section,
.cmc-about-story,
.cmc-about-values,
.cmc-about-identity,
.cmc-about-commitment,
.cmc-contact-section,
.cmc-contact-cards-section,
.cmc-contact-topics-wrap {
    padding-top: var(--cmc-space-lg);
    padding-bottom: var(--cmc-space-lg);
}
/* CTA-wrap sections sit immediately after a fully padded content section,
 * so the previous section's bottom padding already provides the breathing
 * room. Tighten top padding to avoid the 100px+ stacked-gap we'd otherwise
 * get from prev-section pad-bottom + this-section pad-top + banner margin. */
.cmc-about-cta-wrap,
.cmc-contact-cta-wrap,
.cmc-policy-cta-wrap,
.cmc-faq-cta-wrap {
    padding-top: 0;
    padding-bottom: var(--cmc-space-lg);
}

/* =====================================================================
 * 9. Cards — policy item / policy grid / value card / quote card
 * ===================================================================== */
.cmc-policy-list {
    display: flex;
    flex-direction: column;
    gap: var(--cmc-space-md);
}
.cmc-policy-item {
    display: flex;
    gap: var(--cmc-space-md);
    padding: var(--cmc-space-md);
    background: var(--cmc-bg);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
}
.cmc-policy-item__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cmc-bg-subtle);
    border-radius: var(--cmc-radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--cmc-text);
}
.cmc-policy-item__body { flex: 1; min-width: 0; }
.cmc-policy-item__body h2 { margin-top: 0; }

.cmc-policy-grid {
    display: grid;
    /* `min()` keeps the desktop preference at 380px but lets each
     * column collapse to 100% on narrow viewports — without it, a
     * raw `minmax(380px, 1fr)` forces every cell to be ≥380px wide
     * and overflows mobile screens (375px viewport - container
     * padding = ~335px usable) by 45-60px to the right. */
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: var(--cmc-space-md);
    align-items: stretch;
}
.cmc-policy-card {
    background: var(--cmc-bg);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--cmc-space-xs);
    /* Defensive — long tokens (URLs, unbroken legal-name strings,
     * shortcode-resolved phone numbers) wrap inside the card instead
     * of pushing its width beyond the parent grid cell. min-width:0
     * lets the flex column shrink below its min-content baseline. */
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.cmc-policy-card > * { min-width: 0; max-width: 100%; }
.cmc-policy-card--wide { grid-column: 1 / -1; }
.cmc-policy-card__num,
.cmc-value-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--cmc-bg-subtle);
    border-radius: var(--cmc-radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--cmc-text);
    margin-bottom: var(--cmc-space-xs);
}
.cmc-policy-card h3,
.cmc-value-card h3 { margin: 0 0 var(--cmc-space-xs); }

.cmc-values-head { margin-bottom: var(--cmc-space-md); }
.cmc-values-head--center { text-align: center; }
.cmc-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--cmc-space-md);
}
.cmc-value-card {
    background: var(--cmc-bg);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-md);
}

.cmc-quote-card,
.cmc-quote-card--mission,
.cmc-quote-card--policy,
.cmc-quote-card--contact,
.cmc-card-block,
.cmc-card-block--rich,
.cmc-commitment-quote,
.cmc-offerings-panel {
    background: var(--cmc-bg-subtle);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-md);
}
/* Stacked card-blocks / quote-cards live inside flow containers (no flex/
 * grid parent), so give each one a default bottom margin and reset on the
 * last sibling. Applies globally to every policy/about/contact skeleton
 * that stacks these blocks vertically. */
.cmc-quote-card,
.cmc-quote-card--mission,
.cmc-quote-card--policy,
.cmc-quote-card--contact,
.cmc-card-block,
.cmc-card-block--rich,
.cmc-commitment-quote {
    margin-bottom: var(--cmc-space-md);
}
.cmc-quote-card:last-child,
.cmc-quote-card--mission:last-child,
.cmc-quote-card--policy:last-child,
.cmc-quote-card--contact:last-child,
.cmc-card-block:last-child,
.cmc-card-block--rich:last-child,
.cmc-commitment-quote:last-child {
    margin-bottom: 0;
}
.cmc-quote-card__divider {
    border: 0;
    border-top: 1px solid var(--cmc-border);
    margin: var(--cmc-space-sm) 0;
}

.cmc-identity-panel {
    background: var(--cmc-bg-subtle);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-lg);
}
.cmc-identity-panel p {
    margin: 0 0 var(--cmc-space-sm);
}
.cmc-identity-panel p:last-child { margin-bottom: 0; }

/* =====================================================================
 * 10. CTA Banner (page bottom: Let's talk / Questions / Didn't find your answer)
 * ===================================================================== */
.cmc-cta-banner {
    background: var(--cmc-bg-subtle);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-lg);
    padding: var(--cmc-space-lg);
    text-align: center;
    color: var(--cmc-text);
}
.cmc-cta-banner h2,
.cmc-cta-banner h3 {
    color: var(--cmc-text);
    margin: 0 0 var(--cmc-space-sm);
    font-size: 22px;
    font-weight: 600;
}
.cmc-cta-banner p {
    color: var(--cmc-text);
    margin: 0 auto var(--cmc-space-xs);
    max-width: 560px;
}
.cmc-cta-banner a {
    color: var(--cmc-text);
    text-decoration: underline;
    text-decoration-color: var(--cmc-border-strong);
    text-underline-offset: 3px;
}
.cmc-cta-banner a:hover { text-decoration-color: var(--cmc-text); }

.cmc-cta-banner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cmc-space-md);
    align-items: center;
    text-align: left;
}
.cmc-cta-banner__lead,
.cmc-cta-banner__body { text-align: left; }

@media (max-width: 768px) {
    .cmc-cta-banner--split {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cmc-cta-banner__lead,
    .cmc-cta-banner__body { text-align: center; }
}

/* =====================================================================
 * 11. Dividers (V2 policy section breaks)
 * ===================================================================== */
.cmc-v2-divider {
    border: 0;
    /* Darker section rule (#333) so the breaks between policy sections
     * read clearly — the previous --cmc-border (#e5e7eb) was almost
     * invisible. Applies to every V2 policy page. */
    border-top: 1px solid #333333;
    margin: var(--cmc-space-lg) 0;
}

/* =====================================================================
 * 12. V2 Policy layout
 * ===================================================================== */
.cmc-v2-policy .cmc-container--narrow { max-width: 760px; }
.cmc-v2-policy h1 { margin-bottom: var(--cmc-space-xs); }
.cmc-v2-policy .cmc-effective-date { margin: 0 0 var(--cmc-space-md); }
.cmc-v2-policy h2 {
    margin: var(--cmc-space-lg) 0 var(--cmc-space-sm);
    font-size: 20px;
}
.cmc-v2-policy h3 {
    margin: var(--cmc-space-md) 0 var(--cmc-space-xs);
    font-size: 17px;
}
.cmc-v2-policy p,
.cmc-v2-policy ul,
.cmc-v2-policy ol {
    margin-bottom: var(--cmc-space-sm);
    line-height: 1.65;
}
.cmc-v2-policy ul,
.cmc-v2-policy ol { padding-left: 22px; }
.cmc-v2-policy li { margin-bottom: 4px; }
.cmc-v2-policy strong {
    color: var(--cmc-text);
    font-weight: 600;
}
.cmc-v2-policy a {
    color: var(--cmc-text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--cmc-border-strong);
    text-underline-offset: 3px;
}
.cmc-v2-policy a:hover { text-decoration-color: var(--cmc-text); }

/* Contact block — rendered as a bullet-free list so each line (Legal
 * name / Address / Email / Phone / Hours) is a block-level <li> that
 * ALWAYS sits on its own line. Replaces the old `<p>…<br />…</p>`
 * pattern, which could lose a <br /> on some hosts (theme filters,
 * LiteSpeed HTML minify) and merge "…United States" with "Email:". */
.cmc-v2-policy ul.cmc-contact-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 var(--cmc-space-sm);
}
.cmc-v2-policy ul.cmc-contact-list li {
    margin: 0 0 2px;
    line-height: 1.6;
}

/* =====================================================================
 * 13. FAQ accordion (Flatsome override)
 * ===================================================================== */
.cmc-faq-section .cmc-container { max-width: 820px; }

.cmc-faq-section .accordion,
.cmc-faq-section .accordion-item { border: 0 !important; }

.cmc-faq-section .accordion-title {
    background: var(--cmc-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cmc-border) !important;
    /* Symmetric horizontal padding so Flatsome's absolutely-positioned
     * chevron/toggle icon (left:0) doesn't sit on top of the title text,
     * regardless of whether the layout is centered (skel-1) or left (skel-2/3). */
    padding: 16px 36px !important;
    position: relative;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--cmc-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.cmc-faq-section .accordion-title:hover {
    background: var(--cmc-bg-subtle) !important;
}
/* Flatsome positions the chevron/toggle icon at top:0 of the accordion-
 * title, leaving it floating above multi-line titles. Pin it to vertical
 * center so it always aligns with the title text mid-line. */
.cmc-faq-section .accordion-title > i,
.cmc-faq-section .accordion-title > .toggle,
.cmc-faq-section .accordion-title > button {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}
.cmc-faq-section .accordion-inner {
    padding: 16px 36px 24px !important;
    color: var(--cmc-text-muted);
    font-size: 15px;
    line-height: 1.65;
}
.cmc-faq-section .accordion-inner p { color: var(--cmc-text-muted); }

/* FAQ skel-1 / skel-2 nest the bottom CTA banner inside the same
 * .cmc-faq-section as the accordion (no separate .cmc-faq-cta-wrap
 * section), so the section-padding gap that other pages rely on doesn't
 * exist here. Add an explicit top margin so the banner doesn't kiss the
 * last accordion-title border. */
.cmc-faq-section .cmc-cta-banner {
    margin-top: var(--cmc-space-lg);
}

/* Category title rendered by Flatsome's [accordion title="X"] — bumps any
 * non-page-title heading inside the FAQ container/accordion to a clear
 * "section" size so it visually divides groups of questions. */
.cmc-faq-section .cmc-container > h2:not(.cmc-page-title),
.cmc-faq-section .cmc-container > h3,
.cmc-faq-section .cmc-container > h4,
.cmc-faq-section .accordion > h2:not(.cmc-page-title),
.cmc-faq-section .accordion > h3,
.cmc-faq-section .accordion > h4 {
    font-size: 24px;
    font-weight: 600;
    margin: var(--cmc-space-xl) 0 var(--cmc-space-sm);
    text-align: left;
}

.cmc-faq-q {
    padding: var(--cmc-space-md) 0;
    border-bottom: 1px solid var(--cmc-border);
}
.cmc-faq-q:last-of-type { border-bottom: 0; }
.cmc-faq-q h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 var(--cmc-space-xs);
}
.cmc-faq-q p {
    color: var(--cmc-text-muted);
    margin: 0;
}

/* =====================================================================
 * 14. Forms — Contact form + Tracking form
 *     Light gray border, soft radius, dark text, modern muted placeholder,
 *     dark border on focus (no primary color).
 * ===================================================================== */
.cmc-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--cmc-space-sm);
    text-align: left;
}
.cmc-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cmc-space-sm);
}
@media (max-width: 600px) {
    .cmc-contact-form__row { grid-template-columns: 1fr; }
}
.cmc-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.cmc-contact-form__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cmc-text);
    text-align: left;
}
.cmc-contact-form__input,
.cmc-contact-form__textarea,
.cmc-tracking-form input[type="text"],
.cmc-tracking-form input[type="email"] {
    background: var(--cmc-bg) !important;
    border: 1px solid var(--cmc-border) !important;
    border-radius: var(--cmc-radius-sm) !important;
    padding: 13px 16px !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--cmc-text);
    line-height: 1.5;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}
.cmc-contact-form__input:hover,
.cmc-contact-form__textarea:hover,
.cmc-tracking-form input:hover {
    border-color: var(--cmc-border-strong) !important;
    box-shadow: none !important;
}
.cmc-contact-form__input::placeholder,
.cmc-contact-form__textarea::placeholder,
.cmc-tracking-form input::placeholder {
    color: var(--cmc-text-soft);
    font-weight: 400;
    opacity: 1;
}
.cmc-contact-form__input:focus,
.cmc-contact-form__textarea:focus,
.cmc-tracking-form input:focus {
    outline: none;
    border-color: var(--cmc-text) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06) !important;
}
.cmc-contact-form__textarea {
    min-height: 140px;
    resize: vertical;
}
.cmc-contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.cmc-contact-form__submit,
.cmc-tracking-form button,
.cmc-cta-banner .button,
.cmc-cta-banner .button.cmc-contact-cta {
    display: inline-block;
    background: var(--cmc-text) !important;
    color: #ffffff !important;
    border: 1px solid var(--cmc-text) !important;
    border-radius: var(--cmc-radius-sm) !important;
    padding: 11px 22px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: opacity 150ms ease;
    text-decoration: none;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
.cmc-contact-form__submit:hover,
.cmc-tracking-form button:hover,
.cmc-cta-banner .button:hover { opacity: 0.9; }
.cmc-contact-form__submit:disabled,
.cmc-cta-banner .button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =====================================================================
 * 15. Contact cards / Contact topics
 * ===================================================================== */
.cmc-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--cmc-space-md);
    margin: var(--cmc-space-md) 0;
}
.cmc-contact-cards--two {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    max-width: 640px;
    margin-left: 0;
    margin-right: 0;
}
.cmc-contact-card,
.cmc-contact-card--flat {
    background: var(--cmc-bg);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-md);
    text-align: center;
}
.cmc-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--cmc-bg-subtle);
    border-radius: var(--cmc-radius-pill);
    margin-bottom: var(--cmc-space-xs);
    color: var(--cmc-text);
    font-size: 18px;
}
.cmc-contact-topics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--cmc-space-md);
}
.cmc-contact-topic {
    background: var(--cmc-bg);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-md);
}
.cmc-contact-topic h3 { margin-top: 0; }

/* =====================================================================
 * 16. Editorial extras (skel-4 + V2 page-title)
 * ===================================================================== */
.cmc-editorial-h2 {
    font-size: 22px;
    font-weight: 600;
    margin: var(--cmc-space-lg) 0 var(--cmc-space-sm);
    padding-bottom: var(--cmc-space-xs);
    border-bottom: 1px solid var(--cmc-border);
}
.cmc-editorial-h2--numbered::before {
    content: attr(data-num) "\00a0\00a0";
    color: var(--cmc-text-muted);
    font-weight: 500;
}
.cmc-editorial-pullquote {
    border-left: 3px solid var(--cmc-border-strong);
    padding-left: var(--cmc-space-md);
    margin: var(--cmc-space-md) 0;
    color: var(--cmc-text-muted);
    font-style: italic;
}
.cmc-editorial-values {
    list-style: decimal;
    padding-left: 24px;
    margin: var(--cmc-space-md) 0;
}
.cmc-editorial-values li { margin-bottom: var(--cmc-space-md); }
.cmc-editorial-values li:last-child { margin-bottom: 0; }
/* WordPress's wpautop converts the single newline between <span> and the
 * value text into a <br>, leaving an empty line between the label and its
 * body. Strip those <br>s and any inner <p> margin so the label sits
 * directly above its description. */
.cmc-editorial-values li > br { display: none; }
.cmc-editorial-values li p { margin: 0; }
.cmc-editorial-values__label {
    display: block;
    font-weight: 600;
    color: var(--cmc-text);
    margin-bottom: 2px;
}
.cmc-editorial-cta {
    margin-top: var(--cmc-space-lg);
    padding-top: var(--cmc-space-md);
    border-top: 1px solid var(--cmc-border);
}

/* =====================================================================
 * 17. Size Guide
 * ===================================================================== */
.cmc-size-guide-hero { padding: var(--cmc-space-xl) 0 var(--cmc-space-sm); }
/* Tighten the gap below the hero so the chart section sits closer to
 * the intro lead. The .cmc-section h2 default top margin (32px) also
 * stacks with section padding here — zero it out for the chart title. */
.cmc-size-guide-chart-wrap .cmc-section-title { margin-top: 0; }
/* Only the inner table wrapper carries the border + radius; the outer
 * chart-wrap section stays a clean band so we don't render two nested
 * outlines around the chart. */
.cmc-size-guide-table-wrap {
    overflow-x: auto;
    margin: var(--cmc-space-md) 0;
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
}
.cmc-size-guide-chart-wrap { overflow-x: auto; }
.cmc-size-guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--cmc-bg);
}
.cmc-size-guide-table th,
.cmc-size-guide-table td {
    padding: 16px 20px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--cmc-border);
}
/* First/last columns get extra horizontal padding so text doesn't kiss
 * the rounded wrapper edge — gives the whole table an airier feel. */
.cmc-size-guide-table th:first-child,
.cmc-size-guide-table td:first-child { padding-left: 28px; }
.cmc-size-guide-table th:last-child,
.cmc-size-guide-table td:last-child { padding-right: 28px; }
.cmc-size-guide-table thead { background: var(--cmc-bg-subtle); }
.cmc-size-guide-table thead th {
    font-weight: 600;
    color: var(--cmc-text);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cmc-border-strong);
}
.cmc-size-guide-table tbody tr:nth-child(even) { background: var(--cmc-bg-subtle); }
.cmc-size-guide-table tbody tr:hover { background: #f3f4f6; }
.cmc-size-guide-table tbody tr:last-child td { border-bottom: 0; }
.cmc-size-guide-table tbody td:first-child {
    font-weight: 600;
    color: var(--cmc-text);
}
.cmc-size-guide-footer {
    margin-top: var(--cmc-space-md);
    font-size: 14px;
    color: var(--cmc-text-muted);
}

/* =====================================================================
 * 18. Tracking form (Track Your Order page)
 *     Wraps WooCommerce's [woocommerce_order_tracking] form. WC's default
 *     layout floats the two .form-row inputs at 50% which leaves them
 *     touching with no gap — stack vertically for clarity, and give the
 *     submit a wider hit-area.
 * ===================================================================== */
.cmc-tracking-form {
    background: var(--cmc-bg-subtle);
    border: 1px solid var(--cmc-border);
    border-radius: var(--cmc-radius-md);
    padding: var(--cmc-space-lg);
    max-width: 520px;
    margin: var(--cmc-space-md) auto;
}
.cmc-tracking-form .form-row,
.cmc-tracking-form .form-row-first,
.cmc-tracking-form .form-row-last,
.cmc-tracking-form .form-row-wide {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 var(--cmc-space-sm) !important;
}
.cmc-tracking-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cmc-text);
    margin-bottom: 6px;
}
.cmc-tracking-form button,
.cmc-tracking-form button[type="submit"] {
    min-width: 160px;
    padding-left: var(--cmc-space-lg) !important;
    padding-right: var(--cmc-space-lg) !important;
}

/* =====================================================================
 * 19. Skeleton variant alignment overrides
 *     Each variant has a clear, consistent alignment philosophy so no
 *     element drifts left when its neighbours are centered.
 * ===================================================================== */

/* Skel-1: centered hero, default body left for readability */
body.cmc-skel-1 .cmc-policy-hero .cmc-container,
body.cmc-skel-1 .cmc-about-hero .cmc-container,
body.cmc-skel-1 .cmc-contact-hero .cmc-container,
body.cmc-skel-1 .cmc-faq-section .cmc-container { text-align: center; }
body.cmc-skel-1 .cmc-policy-hero .cmc-doc-meta,
body.cmc-skel-1 .cmc-about-hero .cmc-hero-chips,
body.cmc-skel-1 .cmc-contact-hero .cmc-doc-meta { justify-content: center; }
body.cmc-skel-1 .cmc-page-title { text-align: center; }
/* Effective date inside .cmc-policy-item__body should stay left; only
 * center it when it's in the hero (where the parent container is already
 * centered, so inheritance handles it without an explicit rule). */
body.cmc-skel-1 .cmc-policy-list,
body.cmc-skel-1 .cmc-policy-item__body { text-align: left; }
body.cmc-skel-1 .cmc-policy-item__body .cmc-effective-date { text-align: left; }
/* FAQ accordion content (category titles, questions, answers) stays left
 * for readability; only the page title / lead / divider (which carry their
 * own inline centering attributes) remain centered. */
body.cmc-skel-1 .cmc-faq-section .accordion,
body.cmc-skel-1 .cmc-faq-section .accordion-item,
body.cmc-skel-1 .cmc-faq-section .accordion-title,
body.cmc-skel-1 .cmc-faq-section .accordion-inner,
body.cmc-skel-1 .cmc-faq-section .accordion-inner p { text-align: left; }

/* Skel-2: split hero, everything left-aligned */
body.cmc-skel-2 .cmc-policy-hero .cmc-container,
body.cmc-skel-2 .cmc-about-hero .cmc-container,
body.cmc-skel-2 .cmc-contact-hero .cmc-container,
body.cmc-skel-2 .cmc-faq-section .cmc-container { text-align: left; }
body.cmc-skel-2 .cmc-page-title { text-align: left; }
body.cmc-skel-2 .cmc-doc-meta,
body.cmc-skel-2 .cmc-hero-chips { justify-content: flex-start; }
body.cmc-skel-2 .cmc-quote-card { height: 100%; }

/* Skel-3: soft hero + grid */
body.cmc-skel-3 .cmc-policy-hero .cmc-container,
body.cmc-skel-3 .cmc-about-hero .cmc-container,
body.cmc-skel-3 .cmc-contact-hero .cmc-container { text-align: center; }
body.cmc-skel-3 .cmc-page-title { text-align: center; }
body.cmc-skel-3 .cmc-doc-meta { justify-content: center; }
body.cmc-skel-3 .cmc-values-head--center { text-align: center; }
body.cmc-skel-3 .cmc-policy-card,
body.cmc-skel-3 .cmc-value-card { text-align: left; }

/* Skel-4: editorial narrow, everything left + tight container */
body.cmc-skel-4 .cmc-container,
body.cmc-skel-4 .cmc-container--narrow {
    max-width: 760px;
    text-align: left;
}
body.cmc-skel-4 .cmc-page-title { text-align: left; }
body.cmc-skel-4 .cmc-editorial-meta { justify-content: flex-start; }
body.cmc-skel-4 .cmc-faq-section .cmc-container { text-align: left; }

/* =====================================================================
 * 20. Hover affordance — bordered chips/pills/cards/panels
 *     Any element rendered as a bordered card/pill darkens its border
 *     (to --cmc-border-strong) on hover with a smooth transition. Form
 *     inputs handle their own hover state (section 14) so they are
 *     excluded here.
 * ===================================================================== */
.cmc-doc-meta__pill,
.cmc-hero-chip,
.cmc-policy-item,
.cmc-policy-card,
.cmc-value-card,
.cmc-quote-card,
.cmc-quote-card--mission,
.cmc-quote-card--policy,
.cmc-quote-card--contact,
.cmc-card-block,
.cmc-card-block--rich,
.cmc-commitment-quote,
.cmc-offerings-panel,
.cmc-identity-panel,
.cmc-contact-card,
.cmc-contact-card--flat,
.cmc-contact-topic {
    transition: border-color 200ms ease;
}
.cmc-doc-meta__pill:hover,
.cmc-hero-chip:hover,
.cmc-policy-item:hover,
.cmc-policy-card:hover,
.cmc-value-card:hover,
.cmc-quote-card:hover,
.cmc-quote-card--mission:hover,
.cmc-quote-card--policy:hover,
.cmc-quote-card--contact:hover,
.cmc-card-block:hover,
.cmc-card-block--rich:hover,
.cmc-commitment-quote:hover,
.cmc-offerings-panel:hover,
.cmc-identity-panel:hover,
.cmc-contact-card:hover,
.cmc-contact-card--flat:hover,
.cmc-contact-topic:hover {
    border-color: var(--cmc-border-strong);
    background-color: #f9f9f9;
}

/* =====================================================================
 * 21. Utility / variant placeholder classes (skeleton compatibility hooks)
 *
 * .cmc-variant--bands/cards/card/minimal and .cmc-contact-form-mount are
 * intentionally unstyled — they exist as DOM hooks for skeleton markup and
 * JS contact-form mounting. No shared override needed in monochrome theme.
 * ===================================================================== */
.cmc-band {
    padding: var(--cmc-space-md);
    border-radius: var(--cmc-radius-md);
    margin-bottom: var(--cmc-space-sm);
}
.cmc-band:last-child { margin-bottom: 0; }
.cmc-band--soft { background: var(--cmc-bg-subtle); }
.cmc-band h3 { margin-top: 0; }
.cmc-band p:last-child { margin-bottom: 0; }

/* =====================================================================
 * 21b. Mobile overflow safety net
 *
 * Defense-in-depth against horizontal overflow on policy pages. Some
 * AI-generated content (URLs, unwrapped support email addresses,
 * shortcode-resolved phone numbers that include long international
 * prefixes) can exceed the card's intrinsic min-content width and
 * push the whole card past the viewport edge on narrow screens.
 *
 * Three rules:
 *   1. Force every card / panel under .cmc-section to wrap long
 *      tokens instead of stretching its own width.
 *   2. Give flex/grid children `min-width: 0` so they can shrink
 *      below their min-content baseline — without this, the default
 *      `min-width: auto` keeps the container as wide as the longest
 *      uninterruptible token.
 *   3. Wrap image/iframe contents at 100% of their container so
 *      raw-pasted media never pushes past the box.
 * ===================================================================== */
.cmc-section .cmc-policy-card,
.cmc-section .cmc-value-card,
.cmc-section .cmc-contact-card,
.cmc-section .cmc-contact-topic,
.cmc-section .cmc-offerings-panel,
.cmc-section .cmc-identity-panel,
.cmc-section .cmc-card-block,
.cmc-section .cmc-quote-card,
.cmc-section .cmc-cta-banner,
.cmc-section .cmc-cta-banner__lead,
.cmc-section .cmc-cta-banner__body,
.cmc-section .cmc-policy-item,
.cmc-section .cmc-policy-item__body,
.cmc-section .cmc-editorial-pullquote {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.cmc-section .cmc-policy-card > *,
.cmc-section .cmc-value-card > *,
.cmc-section .cmc-contact-card > *,
.cmc-section .cmc-card-block > *,
.cmc-section .cmc-offerings-panel > *,
.cmc-section .cmc-quote-card > * {
    max-width: 100%;
}
.cmc-section img,
.cmc-section iframe { max-width: 100%; height: auto; }

/* =====================================================================
 * 22. Skeleton 5 "Classic" — minimalist policy-page layout
 *
 * Scoped to .cmc-policy-classic so it only affects pages generated
 * from skeleton-5.php. Goal: pure text-document look — H1 + numbered
 * H2 sections separated by a hairline gray <hr>, generous line-height,
 * NO surrounding boxes/borders. Aggressive overrides on Flatsome
 * row/col border/background artifacts that would otherwise wrap the
 * body slot with a faint box on themes that ship bordered variants.
 * ===================================================================== */
.cmc-policy-classic { color: #1a1a1a; }
.cmc-policy-classic .cmc-container--narrow { max-width: 760px; }

/* Headings — large, bold, no theme decorations */
.cmc-policy-classic h1 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: #111;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}
.cmc-policy-classic h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111;
    margin: 40px 0 16px;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-transform: none;
}
.cmc-policy-classic h2::before,
.cmc-policy-classic h2::after { content: none !important; }

/* Body copy — comfortable reading rhythm */
.cmc-policy-classic p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 16px;
    color: #1a1a1a;
}
.cmc-policy-classic strong { font-weight: 700; color: #111; }
.cmc-policy-classic em { font-style: italic; }
.cmc-policy-classic a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: #9ca3af;
}
.cmc-policy-classic a:hover { text-decoration-color: #111; }

/* Lists — disc bullets, comfortable spacing */
.cmc-policy-classic ul,
.cmc-policy-classic ol {
    margin: 0 0 16px;
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
}
.cmc-policy-classic ul { list-style: disc; }
.cmc-policy-classic ol { list-style: decimal; }
.cmc-policy-classic li { margin-bottom: 8px; }
.cmc-policy-classic li:last-child { margin-bottom: 0; }
.cmc-policy-classic li > p { margin-bottom: 6px; }

/* Subtle gray section divider — the visual heart of the Classic look */
.cmc-policy-classic hr {
    border: 0;
    border-top: 1px solid #333;
    height: 0;
    margin: 40px 0;
    padding: 0;
    background: transparent;
}

/* Effective Date paragraph (server-injected on privacy + ToS) — muted */
.cmc-policy-classic .cmc-effective-date {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 28px;
}

/* Defensive: strip Flatsome row/col border + background artifacts so
   no theme variant ends up wrapping the body slot in a faint box. */
.cmc-policy-classic .row,
.cmc-policy-classic .col,
.cmc-policy-classic .col-inner {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =====================================================================
 * 23. Rich product description (.cmc-rich-prod-desc)
 *
 * Scoped wrapper injected by CMC_Title_Rewriter::sanitise_rich_description()
 * when the "Rich" description style is enabled in Settings. Produces a
 * 4-section structured layout (intro paragraph + 3-4 H3 sections with
 * lists) inside the WooCommerce product description tab.
 *
 * Only `.cmc-rich-prod-desc` rules — legacy `compact` (3-paragraph
 * plain prose) descriptions are NOT wrapped and stay unstyled here.
 * That way switching styles per site never accidentally restyles
 * already-saved products.
 * ===================================================================== */
.cmc-rich-prod-desc {
    color: #1a1a1a;
    line-height: 1.7;
    font-size: 15px;
    max-width: 920px;
}
.cmc-rich-prod-desc > p:first-child {
    font-size: 16px;
    margin: 0 0 24px;
}
.cmc-rich-prod-desc p {
    margin: 0 0 16px;
}
.cmc-rich-prod-desc h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    letter-spacing: -0.01em;
}
.cmc-rich-prod-desc h3:first-child { margin-top: 0; }
.cmc-rich-prod-desc ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.cmc-rich-prod-desc li { margin-bottom: 10px; }
.cmc-rich-prod-desc li:last-child { margin-bottom: 0; }
.cmc-rich-prod-desc strong { font-weight: 600; color: #111; }

/* Key Features — bullet-check style */
.cmc-rich-prod-desc ul.cmc-prod-features li {
    position: relative;
    padding-left: 26px;
}
.cmc-rich-prod-desc ul.cmc-prod-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 22px;
    color: #166534;
    font-weight: 700;
    font-size: 14px;
}

/* Use & Care — minimal disc bullets */
.cmc-rich-prod-desc ul.cmc-prod-care li {
    position: relative;
    padding-left: 20px;
}
.cmc-rich-prod-desc ul.cmc-prod-care li::before {
    content: "•";
    position: absolute;
    left: 4px;
    top: 0;
    color: #6b7280;
    font-weight: 700;
}

/* Specifications — table-row style with subtle divider */
.cmc-rich-prod-desc ul.cmc-prod-specs li {
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
}
.cmc-rich-prod-desc ul.cmc-prod-specs li:last-child {
    border-bottom: 0;
}
.cmc-rich-prod-desc ul.cmc-prod-specs li strong {
    display: inline-block;
    min-width: 140px;
    color: #374151;
}

/* Mobile — collapse spec label width so values wrap naturally. */
@media (max-width: 600px) {
    .cmc-rich-prod-desc ul.cmc-prod-specs li strong {
        display: block;
        min-width: 0;
        margin-bottom: 2px;
    }
    .cmc-rich-prod-desc h3 { font-size: 17px; }
}

/* =====================================================================
 * 24. Homepage skeleton L9 — fallback rendering
 *
 * The L9 skeleton was originally written assuming a child theme paste-in
 * for `.nt-l9-*`, `.nt-eyebrow`, `.nt-feat-heading`. When those rules are
 * absent the layout shows two visible problems on stored pages:
 *
 *   (1) Tall vertical voids between sections (Hero → Promo, Promo →
 *       Featured Products) because Flatsome [section] padding stacks
 *       with default section margin and h2 top-margin from .cmc-section.
 *   (2) Brand Story "Lỗi style" — eyebrow renders but the H2 sits 32px
 *       below it via .cmc-section h2 { margin-top } and, if the AI left
 *       STORY_HEADLINE / STORY_PARA empty, the empty H2/p still reserve
 *       vertical space — so the user sees OUR STORY · big-gap · bullets.
 *
 * Skeleton attribute edits handle (1) at generation time; this block is
 * the rendering safety net that fixes both issues on legacy stored
 * content and supplies presentable typography for the three custom
 * classes when no child-theme CSS exists.
 * ===================================================================== */

/* Tighten the visual gap between the promo banner row and the heading
 * of the featured-products section. Section padding is now small by
 * skeleton edit; this zeroes the legacy section bottom-margin Flatsome
 * adds by default so the two strips read as one band. */
.cmc-section.nt-l9-promo,
.cmc-section.nt-l9-products { margin-bottom: 0; }

/* Featured-products heading wrapper. Centered, modest margin, larger
 * weighty type so "FEATURED PRODUCTS" reads as a section title rather
 * than a tiny .cmc-section h2 (22px). */
.cmc-section.nt-l9-products .nt-feat-heading {
    text-align: center;
    margin: 0 auto 24px;
}
.cmc-section.nt-l9-products .nt-l9-h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Brand-story eyebrow — small uppercase muted label sitting tight to
 * the headline. Mirrors .cmc-eyebrow look but scoped to .nt-eyebrow so
 * it does not collide with any child-theme override. */
.cmc-section.nt-l9-story .nt-eyebrow {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cmc-text-muted);
    margin: 0 0 12px;
}

/* Story H2 — reset .cmc-section h2 { margin-top: 32px } so it sits tight
 * under the eyebrow. */
.cmc-section.nt-l9-story .nt-l9-h2 {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.cmc-section.nt-l9-story .nt-eyebrow + .nt-l9-h2 { margin-top: 0; }

.cmc-section.nt-l9-story p {
    /* Pin body size on the story paragraph for the same reason as the
     * bullets below — Flatsome's column-scoped typography sometimes
     * inherits a larger font here. */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    margin: 0 0 20px;
    max-width: 60ch;
}

.cmc-section.nt-l9-story .nt-l9-bullets {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}
.cmc-section.nt-l9-story .nt-l9-bullets li {
    /* Force body typography on the brand-story bullets.
     * Without an explicit font-size the bullets inherit from the
     * Flatsome column, which on some configurations cascades a
     * heading-size — causing the issue the user reported where each
     * bullet rendered at ~28-32px next to a tiny eyebrow. Also pinning
     * the size here neutralises an AI slip-up that wrapped each
     * `{{STORY_BULLET_N}}` in <strong>/<h3>/<p> (the `li *` rule below
     * forces nested tags to inherit the same size + weight). */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 8px;
}
.cmc-section.nt-l9-story .nt-l9-bullets li * {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.cmc-section.nt-l9-story .nt-l9-story-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Collapse empty AI-skipped slots so the section stops reserving the
 * vertical space the user reported as "Lỗi style". */
.cmc-section.nt-l9-story .nt-l9-h2:empty,
.cmc-section.nt-l9-story p:empty,
.cmc-section.nt-l9-products .nt-l9-h2:empty { display: none; }

/* CTA wrap — quick fallback alignment so the closing CTA is centered
 * inside its column rather than left-anchored without a wrapper class. */
.cmc-section.nt-l9-cta .nt-l9-cta-wrap { max-width: 520px; }
.cmc-section.nt-l9-cta .nt-l9-cta-headline {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}
.cmc-section.nt-l9-cta .nt-l9-cta-para {
    color: var(--cmc-text-muted);
    margin: 0 0 20px;
}
.cmc-section.nt-l9-cta .nt-l9-cta-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* =====================================================================
 * 25. Social profiles — public-side `.cmc-socials` widget
 *
 * Rendered by the [cmc_socials] shortcode only. The operator pastes
 * the shortcode wherever they want the icons (e.g. Flatsome footer
 * block, Contact Us page). Four style variants:
 *   - .cmc-socials--mono    : icon only, dark grey (#252525) → #000 hover
 *                             (default — matches minimalist storefronts)
 *   - .cmc-socials--bare    : icon only, each platform's brand colour
 *   - .cmc-socials--rounded : filled circle background per platform
 *   - .cmc-socials--square  : rounded-square filled background
 *
 * Theme-independent on purpose so switching theme keeps the look
 * stable. Brand colours are passed via the `--cmc-social-color` custom
 * property per link so we don't need a per-platform rule.
 * ===================================================================== */
.cmc-socials {
    --cmc-social-size: 32px;
    margin: 16px 0;
}
.cmc-socials__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 10px;
}
.cmc-socials__row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.cmc-socials__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cmc-social-size);
    height: var(--cmc-social-size);
    border-radius: 50%;
    background: var(--cmc-social-color, #4b5563);
    color: #fff;
    text-decoration: none;
    transition: transform 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
}
.cmc-socials__item:hover,
.cmc-socials__item:focus {
    transform: translateY( -1px );
    box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.12 );
    color: #fff;
    text-decoration: none;
    opacity: 0.92;
}
.cmc-socials__icon { display: inline-flex; line-height: 0; }
.cmc-socials__icon svg { display: block; }

.cmc-socials--square .cmc-socials__item { border-radius: 6px; }

/* Bare — icon only, per-platform brand colour. Keeps the brand
 * association (Facebook blue, Instagram pink, etc.) but lets the icon
 * float without a background disc. Hover collapses to near-black for a
 * gentle interaction state. */
.cmc-socials--bare .cmc-socials__item {
    background: transparent;
    color: var(--cmc-social-color, #374151);
    box-shadow: none;
}
.cmc-socials--bare .cmc-socials__item:hover,
.cmc-socials--bare .cmc-socials__item:focus {
    color: #111111;
    box-shadow: none;
}

/* Mono — flat dark-grey icon with no background and no per-platform
 * colour. Hover deepens to true black. The default style; matches
 * editorial / minimalist footer designs and reads consistently across
 * dark or light theme backgrounds (theme footer typically has its own
 * bg colour which the icons sit against). */
.cmc-socials--mono .cmc-socials__item {
    background: transparent;
    color: #676767 !important;
    box-shadow: none;
}
.cmc-socials--mono .cmc-socials__item:hover,
.cmc-socials--mono .cmc-socials__item:focus {
    color: #000000 !important;
    background: transparent;
    box-shadow: none;
    transform: none;
    opacity: 1;
}

/* Hover tooltip — CSS pseudo-element driven by data-tooltip on each
 * <a>. Instant appearance (no ~1s native delay), styled bubble + arrow,
 * z-indexed above the icon row so it isn't clipped by footer overflow.
 * pointer-events:none keeps hover state on the underlying link. */
.cmc-socials__item { position: relative; }
.cmc-socials__item::before,
.cmc-socials__item::after {
    position: absolute;
    left: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 10;
}
.cmc-socials__item::before {
    content: attr( data-tooltip );
    bottom: calc( 100% + 8px );
    transform: translate( -50%, 4px );
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.18 );
}
.cmc-socials__item::after {
    content: '';
    bottom: calc( 100% + 2px );
    transform: translate( -50%, 4px );
    border: 6px solid transparent;
    border-top-color: #111111;
}
.cmc-socials__item:hover::before,
.cmc-socials__item:focus::before,
.cmc-socials__item:hover::after,
.cmc-socials__item:focus::after {
    opacity: 1;
    transform: translate( -50%, 0 );
}
.cmc-socials__item:not([data-tooltip])::before,
.cmc-socials__item:not([data-tooltip])::after { display: none; }

/* Mobile — slightly tighter gap so a 6-icon row never overflows the
 * footer container on small viewports. Tooltips suppressed because
 * hover-on-tap is ambiguous and would flash on every press. */
@media ( max-width: 480px ) {
    .cmc-socials__row { gap: 8px; }
    .cmc-socials__item::before,
    .cmc-socials__item::after { display: none; }
}

/* =====================================================================
 * 26. Social-label override inside Contact Us CTAs
 *
 * `[cmc_socials]` is embedded inside the closing "We're here to help"
 * CTA block of each Contact Us skeleton (between contact info and
 * the form). The section-25 default styles label `.cmc-socials__label`
 * as small UPPERCASE muted gray — that reads as a separate eyebrow,
 * which competes with the CTA's own h2/h3 heading.
 *
 * Inside `.cmc-cta-banner` (skeletons 1/2/3) and `.cmc-editorial-cta`
 * (skeleton 4) we want the label to be a quieter sentence-case
 * descriptor — "Connect with us" rendered as written, not blown out
 * to all-caps. Scoping keeps homepage/footer usages untouched.
 * ===================================================================== */
.cmc-cta-banner .cmc-socials__label,
.cmc-editorial-cta .cmc-socials__label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    color: var(--cmc-text-muted);
    margin-bottom: 8px;
}

/* Skeleton-4 is left-aligned editorial — keep the social row aligned
 * with the surrounding prose instead of inheriting the default
 * `text-align: center` from `.cmc-socials`. */
.cmc-editorial-cta .cmc-socials {
    text-align: left;
    margin: 16px 0 20px;
}
.cmc-editorial-cta .cmc-socials__row { justify-content: flex-start; }