[data-klarna-plugin-views-container],
[data-klarna-plugin-views-container] * {
    outline: none !important;
    border: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
/* Cache bust: 2026-04-07T18:00 v2.0.9 */
/*
 * COMPOS WIDGET SHARED STYLESHEET
 *
 * RESPONSIVE RULES:
 * - Mobile first — base styles target 320px+
 * - Tablet breakpoint: 768px
 * - Desktop breakpoint: 1024px
 * - Never use fixed px widths on containers
 * - Never use fixed px heights unless min-height
 * - Always use % or vw for full-width elements
 * - Touch targets minimum 44px height on mobile
 * - Decorative images hidden on mobile
 * - Grid columns collapse to 1 on mobile
 *
 * NEVER ADD TO THIS FILE:
 * - Widget-specific layout rules (go in widget CSS)
 * - Hardcoded colour hex values
 * - !important except with comment explaining why
 */

/**
 * Compos Widget Base Styles
 *
 * Shared styles for all widgets extending Compos_Widget_Base.
 * Three-layer structure: wrapper → overlay → content.
 * CSS variables defined at :root, overridable per widget via inline style.
 */

/* CSS variables are output by compos_output_brand_css() on wp_head — no :root block here */

/* ================================================================
   COMPOS WIDGET FOUNDATION
   Token-based. Operator colours flow through automatically.
   No mode switching. No context redefinition. Just tokens.
   ================================================================ */

.xw-wrap { box-sizing: border-box; }

/* Showcase widget wrapper treatments */
.xw-bg--dark-solid {
    background: var(--cp-elevated, #111828);
    padding: 40px 32px;
    border-radius: var(--cp-radius-md, 16px);
}
.xw-bg--light-solid {
    background: var(--cp-surface-light, #f5f5f5);
    padding: 40px 32px;
    border-radius: var(--cp-radius-md, 16px);
}
.xw-bg--accent-fill {
    background: var(--cp-accent, #ff650e);
    padding: 40px 32px;
    border-radius: var(--cp-radius-md, 16px);
}
.xw-bg--transparent,
.xw-bg--dark-on-image,
.xw-bg--light-on-image { background: transparent; }

@media (max-width: 1024px) {
    .xw-bg--dark-solid,
    .xw-bg--light-solid,
    .xw-bg--accent-fill { padding: 32px 24px; }
}
@media (max-width: 640px) {
    .xw-bg--dark-solid,
    .xw-bg--light-solid,
    .xw-bg--accent-fill { padding: 24px 16px; }
}

/* Universal text classes — every widget uses these */
.xw-heading {
    font-family: var(--cp-font-heading, inherit);
    color: var(--cp-text-heading, #ffffff);
}
.xw-subheading { color: var(--cp-text-muted, rgba(255,255,255,0.75)); }
.xw-card-title {
    font-family: var(--cp-font-heading, inherit);
    color: var(--cp-text-heading, #ffffff);
}
.xw-card-body  { color: var(--cp-text, #e2e8f0); }
.xw-label      { color: var(--cp-text-muted); }
.xw-meta       { color: var(--cp-text-muted); }
.xw-excerpt    { color: var(--cp-text-muted); }
.xw-stat-value { color: var(--cp-text-heading); }
.xw-stat-label { color: var(--cp-text-muted); }
.xw-price      { color: var(--cp-accent); }
.xw-eyebrow    { color: var(--cp-accent); }

/* Showcase treatment-specific text — override tokens where treatment dictates contrast */
.xw-bg--dark-on-image .xw-heading,
.xw-bg--dark-on-image .xw-card-title,
.xw-bg--dark-on-image .xw-subheading,
.xw-bg--dark-on-image .xw-card-body,
.xw-bg--dark-on-image .xw-label,
.xw-bg--dark-on-image .xw-meta { color: #ffffff; }
.xw-bg--light-on-image .xw-heading,
.xw-bg--light-on-image .xw-card-title { color: #0e1628; }
.xw-bg--light-on-image .xw-subheading,
.xw-bg--light-on-image .xw-card-body,
.xw-bg--light-on-image .xw-label,
.xw-bg--light-on-image .xw-meta { color: rgba(14,22,40,0.70); }
.xw-bg--accent-fill .xw-heading,
.xw-bg--accent-fill .xw-card-title,
.xw-bg--accent-fill .xw-subheading,
.xw-bg--accent-fill .xw-card-body,
.xw-bg--accent-fill .xw-label,
.xw-bg--accent-fill .xw-meta { color: #ffffff; }

/* Panel surfaces — use site surface token */
.xw-card,
.xw-panel,
.xw-chip,
.xw-pill,
.xw-plan-box,
.xw-accordion-item,
.xw-search-input {
    background: var(--cp-surface, #111828);
    border-color: var(--cp-border, rgba(255,255,255,0.10));
}

.xw-card {
    transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.xw-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--cp-accent-rgb, 255,101,14), 0.4);
    box-shadow: 0 0 0 1px rgba(var(--cp-accent-rgb, 255,101,14), 0.4), 0 8px 32px rgba(14,22,40,0.4);
}

/* Overlay system — showcase widgets with bg image use .xw-ov child */
.xw-ov {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.xw-bg--dark-on-image .xw-ov,
.xw-bg--transparent .xw-ov {
    background: linear-gradient(to top,
        rgba(14,22,40, clamp(0, calc(var(--xw-ov-s, .55) + .20), 1)) 0%,
        rgba(14,22,40, clamp(0, var(--xw-ov-s, .55), 1)) 55%,
        rgba(14,22,40, clamp(0, calc(var(--xw-ov-s, .55) - .20), 1)) 100%);
}
.xw-bg--light-on-image .xw-ov {
    background: linear-gradient(to top,
        rgba(240,240,240, clamp(0, calc(var(--xw-ov-s, .55) + .20), 1)) 0%,
        rgba(240,240,240, clamp(0, var(--xw-ov-s, .55), 1)) 55%,
        rgba(240,240,240, clamp(0, calc(var(--xw-ov-s, .55) - .20), 1)) 100%);
}

/* Per-card photo overlays — always dark for text readability over real photos */
.xw-img-ov {
    background: linear-gradient(to bottom, transparent 40%, rgba(14,22,40,0.85) 100%);
}

/* Animation */
.xw-anim { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.xw-visible .xw-anim { opacity: 1; transform: none; }
.xw-visible .xw-anim:nth-child(1) { transition-delay: 0s; }
.xw-visible .xw-anim:nth-child(2) { transition-delay: 0.12s; }
.xw-visible .xw-anim:nth-child(3) { transition-delay: 0.22s; }
.xw-visible .xw-anim:nth-child(4) { transition-delay: 0.32s; }
.xw-visible .xw-anim:nth-child(5) { transition-delay: 0.40s; }
.xw-visible .xw-anim:nth-child(6) { transition-delay: 0.46s; }

/* Extended universal text / surface classes — token-based */
.xw-eyebrow {
    font-size: var(--cp-font-size-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-accent, #ff650e);
}
.xw-author-name  { color: var(--cp-text-heading); font-weight: 600; }
.xw-step-title   { color: var(--cp-text-heading); font-weight: 700; }
.xw-step-body    { color: var(--cp-text-muted); }
.xw-feature-text { color: var(--cp-text); }

/* Extended panel surfaces — inherit tokens automatically */
.xw-tab-panel,
.xw-badge-item,
.xw-timeline-item,
.xw-stat-block,
.xw-team-card,
.xw-testimonial-card,
.xw-service-card,
.xw-feature-card,
.xw-pricing-card,
.xw-step-card {
    background: var(--cp-surface, #111828);
    border-color: var(--cp-border, rgba(255,255,255,0.10));
}

/* Buttons — token-based primary + ghost */
.xw-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--cp-btn-padding-y, 10px) var(--cp-btn-padding-x, 22px);
    background: var(--cp-btn-primary-bg, var(--cp-accent, #ff650e));
    color: var(--cp-btn-primary-text, #ffffff); /* intentional — text on accent */
    border: 1px solid var(--cp-btn-primary-border, transparent);
    border-radius: var(--cp-btn-radius, var(--cp-radius-sm, 8px));
    font-family: var(--cp-font-body, inherit);
    font-weight: var(--cp-btn-font-weight, 700);
    font-size: var(--cp-font-size-sm, 0.875rem);
    letter-spacing: var(--cp-btn-letter-spacing, 0.01em);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    white-space: nowrap;
}
.xw-btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: var(--cp-btn-primary-hover-shadow, 0 4px 16px rgba(var(--cp-accent-rgb, 255,101,14), 0.35));
    color: var(--cp-btn-primary-text, #ffffff); /* intentional — text on accent */
}
.xw-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--cp-btn-padding-y, 10px) var(--cp-btn-padding-x, 22px);
    background: transparent;
    color: var(--cp-btn-secondary-text, var(--cp-text-heading, #ffffff));
    border: var(--cp-btn-secondary-border-width, 2px) solid var(--cp-btn-secondary-border, var(--cp-border, rgba(255,255,255,0.2)));
    border-radius: var(--cp-btn-radius, var(--cp-radius-sm, 8px));
    font-family: var(--cp-font-body, inherit);
    font-weight: var(--cp-btn-font-weight, 700);
    font-size: var(--cp-font-size-sm, 0.875rem);
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.xw-btn-ghost:hover {
    background: var(--cp-btn-secondary-hover-bg, rgba(var(--cp-accent-rgb, 255,101,14), 0.1));
    border-color: var(--cp-accent, #ff650e);
    color: var(--cp-btn-secondary-hover-text, var(--cp-accent, #ff650e));
}

/* Universal input — token-based */
.xw-input {
    height: var(--cp-input-height, 44px);
    padding: 0 var(--cp-input-padding-x, 0.875rem);
    background: var(--cp-surface, #111828);
    border: var(--cp-input-border-width, 1px) solid var(--cp-border, rgba(255,255,255,0.10));
    border-radius: var(--cp-input-radius, 6px);
    color: var(--cp-text, #e2e8f0);
    font-family: var(--cp-font-body, inherit);
    font-size: var(--cp-font-size-sm, 0.875rem);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.xw-input:focus {
    outline: none;
    border-color: var(--cp-input-focus-border, var(--cp-accent, #ff650e));
    box-shadow: 0 0 0 var(--cp-input-focus-ring-width, 3px) var(--cp-input-focus-ring, rgba(var(--cp-accent-rgb, 255,101,14), 0.25));
}
.xw-input::placeholder { color: var(--cp-text-faint, rgba(255,255,255,0.40)); }

/* Filter chips / category pills */
.xw-chip, .xw-filter-btn {
    padding: 6px 16px;
    border-radius: 99px;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: var(--cp-font-body, inherit);
    white-space: nowrap;
}
.xw-chip:hover, .xw-filter-btn:hover {
    border-color: var(--cp-border-strong);
    color: var(--cp-text-heading);
}
.xw-chip.is-active, .xw-filter-btn.is-active {
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    color: #fff; /* intentional — text on accent */
}

/* Empty state */
.xw-empty       { text-align: center; padding: 60px 20px; color: var(--cp-text-faint); }
.xw-empty-icon  { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.xw-empty-title { font-size: var(--cp-font-size-md, 1rem); color: var(--cp-text-muted); margin: 0 0 8px; font-weight: 600; }
.xw-empty-text  { font-size: var(--cp-font-size-sm, 0.875rem); color: var(--cp-text-faint); margin: 0; }

/* Pagination */
.xw-pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.xw-pagination a,
.xw-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--cp-radius-sm, 8px);
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    color: var(--cp-text-muted);
    text-decoration: none;
    font-size: var(--cp-font-size-sm, 0.875rem);
    font-weight: 600;
    transition: all 200ms ease;
    white-space: nowrap;
}
.xw-pagination a:hover {
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.1);
    border-color: var(--cp-accent);
    color: var(--cp-accent);
}
.xw-pagination .current,
.xw-pagination .xw-page-current {
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    color: #fff; /* intentional — text on accent */
}

/* Divider */
.xw-divider { border: none; border-top: 1px solid var(--cp-border); margin: 24px 0; }

/* Base wrapper inherits all surface tokens — every widget extending
   Compos_Widget_Base emits .compos-widget via render_open_wrapper().
   Wrapper background reads --cp-bg so bg_preset overrides (Dark/Light/
   Warm/Neon/Accent/Transparent) and colour_override_bg apply cleanly. */
.compos-widget {
    background: var(--cp-bg);
    color: var(--cp-text);
    border-color: var(--cp-border);
}
.compos-widget h1,
.compos-widget h2,
.compos-widget h3,
.compos-widget h4,
.compos-widget h5,
.compos-widget h6 {
    color: var(--cp-text-heading);
}
.compos-widget p,
.compos-widget li,
.compos-widget span:not(.cp-accent-text) {
    color: var(--cp-text);
}

/* Per-element font-family tokens so widget-scoped font overrides
   (#widget_id { --cp-font-*: ... }) cascade into descendants even
   when Elementor or the theme sets font-family on a descendant. */
.compos-widget h1,
.compos-widget h2,
.compos-widget h3,
.compos-widget h4,
.compos-widget h5,
.compos-widget h6,
.compos-widget .xw-heading,
.compos-widget .xw-card-title {
    font-family: var(--cp-font-heading, inherit);
}
.compos-widget p,
.compos-widget li,
.compos-widget .xw-card-body,
.compos-widget .xw-subheading,
.compos-widget .xw-meta,
.compos-widget .xw-excerpt {
    font-family: var(--cp-font-body, inherit);
}

/* ── OPERATOR COLOUR OVERRIDE ──
   When the operator enables Override Site Colours on a widget,
   get_bg_inline_style() emits CSS custom properties inline on the
   wrapper. Those property redeclarations cascade to every descendant
   automatically — no per-selector !important needed for surface/text.
   The only rule we need to add is widget-background, which isn't
   picked up automatically because .compos-widget only sets background
   from --cp-surface, not --cp-bg. */
.compos-widget[style*="--cp-bg:"] {
    background: var(--cp-bg) !important;
}
.compos-widget[style*="--cp-surface:"] h1,
.compos-widget[style*="--cp-surface:"] h2,
.compos-widget[style*="--cp-surface:"] h3,
.compos-widget[style*="--cp-surface:"] h4,
.compos-widget[style*="--cp-surface:"] h5,
.compos-widget[style*="--cp-surface:"] h6 {
    color: var(--cp-text-heading);
}

/* ── BACKGROUND IMAGE ──
   When --cp-widget-bg-image is set by get_bg_inline_style() (bg_preset=image
   or gradient), paint the image on the widget wrapper. */
.compos-widget[style*="--cp-widget-bg-image"] {
    background-image: var(--cp-widget-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

/* Overlay on image background — ::before pseudo, tint colour picked by
   --cp-overlay-style (dark / light / accent / none). */
.compos-widget[style*="--cp-widget-bg-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.compos-widget[style*="--cp-overlay-style:dark"]::before {
    background: rgba(14,22,40, var(--cp-overlay-opacity, 0.55));
    /* rgba hardcoded — intentional, dark overlay for readability */
}
.compos-widget[style*="--cp-overlay-style:light"]::before {
    background: rgba(255,255,255, var(--cp-overlay-opacity, 0.55));
    /* rgba hardcoded — intentional, light haze */
}
.compos-widget[style*="--cp-overlay-style:accent"]::before {
    background: rgba(var(--cp-accent-rgb, 255,101,14), var(--cp-overlay-opacity, 0.55));
}
.compos-widget[style*="--cp-overlay-style:none"]::before {
    display: none;
}

/* Content sits above the overlay */
.compos-widget[style*="--cp-widget-bg-image"] > * {
    position: relative;
    z-index: 1;
}

/* ── GRADIENT BACKGROUND ──
   bg_preset=gradient emits --cp-grad-color1/color2/angle. Paint the
   gradient on the widget wrapper. */
.compos-widget[style*="--cp-grad-color1"] {
    background: linear-gradient(
        calc(var(--cp-grad-angle, 135) * 1deg),
        var(--cp-grad-color1, #1A1A1A),
        var(--cp-grad-color2, transparent)
    ) !important; /* operator preset — wins over wrapper --cp-bg */
}

/* ── MODALS — HEADER TOKEN TIER ──
   Modals are elevated chrome (like the header), not page content.
   They read --cp-header-* tokens so they feel consistent with the
   header regardless of preset. Frontend prefixes listed explicitly;
   admin (cv7-*) excluded — uses --cp-admin-*. */
.ch-modal-box,
.cdn-modal-box,
.cmc-modal,
.cmc-modal-content,
.dg-modal-box,
.se-modal-box,
.wh-modal-box,
.compos-modal,
.compos-modal-box,
.compos-modal-content,
[class*="modal-box"]:not([class^="cv7"]):not([class*=" cv7"]),
[class*="modal-content"]:not([class^="cv7"]):not([class*=" cv7"]),
[class*="modal-panel"]:not([class^="cv7"]):not([class*=" cv7"]) {
    background: var(--cp-header-bg, #0e1628);
    color: var(--cp-header-text, #ffffff);
    border-color: var(--cp-header-border, rgba(255,255,255,0.08));
}

/* Modal headings + body text — read header text token */
.ch-modal-box h1, .ch-modal-box h2, .ch-modal-box h3, .ch-modal-box h4, .ch-modal-box h5, .ch-modal-box h6,
.cdn-modal-box h1, .cdn-modal-box h2, .cdn-modal-box h3, .cdn-modal-box h4, .cdn-modal-box h5, .cdn-modal-box h6,
.cmc-modal h1, .cmc-modal h2, .cmc-modal h3, .cmc-modal h4, .cmc-modal h5, .cmc-modal h6,
.dg-modal-box h1, .dg-modal-box h2, .dg-modal-box h3,
.se-modal-box h1, .se-modal-box h2, .se-modal-box h3,
.wh-modal-box h1, .wh-modal-box h2, .wh-modal-box h3,
.compos-modal h1, .compos-modal h2, .compos-modal h3, .compos-modal h4, .compos-modal h5, .compos-modal h6,
[class*="modal-box"]:not([class^="cv7"]) h1, [class*="modal-box"]:not([class^="cv7"]) h2, [class*="modal-box"]:not([class^="cv7"]) h3 {
    color: var(--cp-header-text, #ffffff);
    font-family: var(--cp-font-heading, inherit);
}
.ch-modal-box p, .ch-modal-box li,
.cdn-modal-box p, .cdn-modal-box li,
.cmc-modal p, .cmc-modal li,
.dg-modal-box p, .dg-modal-box li,
.se-modal-box p, .se-modal-box li,
.wh-modal-box p, .wh-modal-box li,
.compos-modal p, .compos-modal li,
[class*="modal-box"]:not([class^="cv7"]) p, [class*="modal-box"]:not([class^="cv7"]) li {
    color: var(--cp-header-text, #ffffff);
    font-family: var(--cp-font-body, inherit);
}

/* Muted text inside modals — dimmed version of header-text via opacity
   so any header-text value (white / gold / purple) stays on-theme. */
.ch-modal-box small, .ch-modal-box .xw-meta, .ch-modal-box .xw-label,
.cmc-modal small, .cmc-modal .cp-muted,
.compos-modal small, .compos-modal .cp-muted,
[class*="modal-box"]:not([class^="cv7"]) small,
[class*="modal-box"]:not([class^="cv7"]) .cp-muted {
    color: var(--cp-header-text, #ffffff);
    opacity: 0.65;
}

/* Inner panels / stat cards — use the dropdown start token
   (slightly lighter elevation inside the header-tier modal). */
.ch-modal-box [class*="-card"], .ch-modal-box [class*="-stat"], .ch-modal-box [class*="-panel"],
.cmc-modal [class*="-card"], .cmc-modal [class*="-stat"],
.compos-modal [class*="-card"], .compos-modal [class*="-stat"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-card"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-stat"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-panel"] {
    background: var(--cp-header-dropdown-bg-start, #111828);
    border-color: var(--cp-header-border, rgba(255,255,255,0.08));
    color: var(--cp-header-text, #ffffff);
}
.ch-modal-box [class*="-card"] [class*="-label"],
.ch-modal-box [class*="-stat"] [class*="-label"],
.cmc-modal [class*="-card"] [class*="-label"],
.compos-modal [class*="-card"] [class*="-label"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-card"] small,
[class*="modal-box"]:not([class^="cv7"]) [class*="-stat"] small {
    color: var(--cp-header-text, #ffffff);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--cp-font-size-xs, 0.75rem);
}

/* Modal header bar / footer bar — read border + elevated token */
[class*="modal-header"]:not([class^="cv7"]) {
    border-bottom-color: var(--cp-header-border, rgba(255,255,255,0.08));
}
[class*="modal-footer"]:not([class^="cv7"]) {
    border-top-color: var(--cp-header-border, rgba(255,255,255,0.08));
    background: var(--cp-header-dropdown-bg-end, #0d1020);
}

/* Close button */
[class*="modal-close"]:not([class^="cv7"]) {
    color: var(--cp-header-text, #ffffff);
    opacity: 0.6;
    transition: opacity 200ms ease;
}
[class*="modal-close"]:not([class^="cv7"]):hover { opacity: 1; }

/* Backdrop — always dark regardless of preset */
.ch-modal-ov,
.cdn-modal-overlay,
.cmc-modal-overlay,
.cmc-modal-backdrop,
.dg-modal-overlay,
.se-modal-overlay,
.wh-modal-overlay,
.compos-modal-backdrop,
.compos-modal-overlay,
[class*="modal-backdrop"]:not([class^="cv7"]):not([class*=" cv7"]),
[class*="modal-overlay"]:not([class^="cv7"]):not([class*=" cv7"]) {
    background: rgba(0,0,0,0.80);
    backdrop-filter: blur(4px);
    /* intentional — backdrop always dark for focus, regardless of preset */
}

/* ── MINI-CART ──
   Rendered as a slide-in sidebar attached to <body>. Uses the header
   token tier like modals — elevated chrome, not page content. */
.compos-mini-cart-sidebar,
.widget_shopping_cart,
.woocommerce-mini-cart {
    background: var(--cp-header-bg, #0e1628);
    color: var(--cp-header-text, #ffffff);
    border-color: var(--cp-header-border, rgba(255,255,255,0.08));
}
.compos-mini-cart-header,
.compos-mini-cart-footer {
    background: var(--cp-header-dropdown-bg-end, #0d1020);
    border-color: var(--cp-header-border, rgba(255,255,255,0.08));
    color: var(--cp-header-text, #ffffff);
}
.compos-mini-cart-header h1,
.compos-mini-cart-header h2,
.compos-mini-cart-header h3,
.woocommerce-mini-cart__total {
    color: var(--cp-header-text, #ffffff);
    font-family: var(--cp-font-heading, inherit);
}
.compos-mini-cart-body,
.woocommerce-mini-cart-item {
    background: var(--cp-header-dropdown-bg-start, #111828);
    border-color: var(--cp-header-border, rgba(255,255,255,0.08));
    color: var(--cp-header-text, #ffffff);
}
.woocommerce-mini-cart-item a,
.compos-mini-cart-body a { color: var(--cp-header-text, #ffffff); }
.compos-mini-cart-subtotal,
.compos-mini-cart-total,
.woocommerce-mini-cart__total .amount {
    color: var(--cp-accent);
}
.compos-mini-cart-overlay {
    background: rgba(0,0,0,0.80);
    backdrop-filter: blur(4px);
    /* intentional — cart backdrop always dark */
}

/* ── TOASTS / NOTIFICATIONS — HEADER TOKEN TIER ──
   Toasts float above page content as chrome-tier UI, same as the
   header. Use --cp-header-* tokens. Accent stays as --cp-accent
   on any preset. Shadow always dark — intentional since toasts
   need a lift against any page background. */
.compos-toast,
.cp-toast,
.cp-notification,
.compos-notification,
[class*="cp-toast"],
[class*="compos-toast"],
[class*="cp-notify"] {
    background: var(--cp-header-bg, #0e1628);
    color: var(--cp-header-text, #ffffff);
    border: 1px solid var(--cp-header-border, rgba(255,255,255,0.08));
    border-radius: var(--cp-radius-md, 14px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.40); /* always dark — intentional */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.compos-toast [class*="-icon"],
[class*="cp-toast"] [class*="-icon"] { color: var(--cp-accent, #ff650e); }
.compos-toast [class*="-title"],
.compos-toast strong,
[class*="cp-toast"] [class*="-title"],
[class*="cp-toast"] strong {
    color: var(--cp-header-text, #ffffff);
    font-family: var(--cp-font-heading, inherit);
    font-weight: 700;
}
.compos-toast p, .compos-toast [class*="-body"], .compos-toast [class*="-message"],
[class*="cp-toast"] p, [class*="cp-toast"] [class*="-body"], [class*="cp-toast"] [class*="-message"] {
    color: var(--cp-header-text, #ffffff);
    opacity: 0.85;
    font-family: var(--cp-font-body, inherit);
}
.compos-toast [class*="-close"],
[class*="cp-toast"] [class*="-close"] {
    color: var(--cp-header-text, #ffffff);
    opacity: 0.55;
    transition: opacity 200ms ease;
}
.compos-toast [class*="-close"]:hover,
[class*="cp-toast"] [class*="-close"]:hover { opacity: 1; }
.compos-toast [class*="-value"], .compos-toast [class*="-amount"],
[class*="cp-toast"] [class*="-value"], [class*="cp-toast"] [class*="-amount"] {
    color: var(--cp-accent, #ff650e);
    font-weight: 700;
}
.compos-toast [class*="-progress"],
[class*="cp-toast"] [class*="-progress"] {
    background: var(--cp-accent, #ff650e);
    opacity: 0.6;
}
/* Semantic variant border — intentional hardcoded status colours */
.cp-toast--success, [class*="cp-toast"][class*="success"] { border-left: 3px solid #10b981; /* intentional — status success */ }
.cp-toast--error,   [class*="cp-toast"][class*="error"]   { border-left: 3px solid #ef4444; /* intentional — status error */ }
.cp-toast--warning, [class*="cp-toast"][class*="warning"] { border-left: 3px solid #d97706; /* intentional — status warning */ }

/* Nested toast children — zero borders/shadows. Only the outer
   wrapper carries the subtle header-border. Prevents plugin-rendered
   inner panels (e.g. GamiPress notification bodies) from stacking
   their own coloured borders inside the toast. */
.compos-toast > *,
.cp-toast > *,
[class*="cp-toast"] > *,
[class*="compos-toast"] > * {
    border: 0 !important; /* intentional — inner toast layers must not stack borders */
    box-shadow: none !important;
    outline: none !important;
}

/* ── TOAST SHAPE / CORNER UNIFORMITY ──
   overflow:hidden clips any child that would otherwise bleed past
   the rounded corners. Uniform border on all four sides. Children
   get their own bottom-border and radius stripped so the outer
   wrapper is the single frame. */
.compos-toast,
.cp-toast,
[class*="cp-toast"],
[class*="compos-toast"] {
    border-radius: var(--cp-radius-md, 14px) !important;
    overflow: hidden !important; /* clips child corners to wrapper radius */
}
.compos-toast > *:last-child,
.cp-toast > *:last-child,
[class*="cp-toast"] > *:last-child,
[class*="compos-toast"] > *:last-child {
    border-bottom: 0 !important;
    border-radius: 0 !important; /* parent owns the radius — no nested rounding */
}
.compos-toast [class*="-progress"],
.compos-toast [class*="-bar"],
[class*="cp-toast"] [class*="-progress"],
[class*="cp-toast"] [class*="-bar"] {
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Toast inner elements — never have radius. Only the outer toast
   wrapper carries border-radius. Safety net so theme.json / Elementor
   / plugin defaults can't reintroduce rounded inner boxes. */
.compos-toast-content,
.compos-toast-title,
.compos-toast-text,
.compos-toast-icon {
    border-radius: 0 !important; /* intentional — inner toast chrome never rounded */
}

/* GamiPress notifyjs outer positioning — strip radius / bg / border
   that the plugin paints on the wrapper so only the toast itself has
   chrome. Nothing else gamipress-related — the toast is the plugin's. */
.gamipress_notifyjs-corner,
.gamipress_notifyjs-wrapper,
.gamipress_notifyjs-container {
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Empty toast container — prevent ghost line when no toast is showing */
.compos-toast-container:empty,
[class*="toast-container"]:empty {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    pointer-events: none !important;
}

/* Toast title — covers every class variant the plugin may apply
   (bare h4, .toast-title, .compos-toast-title, .compos-toast-text). */
.gamipress-notification h4,
.gamipress-notification .toast-title,
.gamipress-notification .compos-toast-title,
.gamipress-notification .compos-toast-text {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    color: var(--cp-header-text, #ffffff) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    display: block !important;
    width: auto !important;
}
.gamipress-notification h4::before,
.gamipress-notification h4::after,
.gamipress-notification .toast-title::before,
.gamipress-notification .toast-title::after {
    display: none !important;
    content: none !important;
}

/* Game HUD stats bar (SCORE / KILLS / PROGRESS / TIME) inside
   paid-games and daily-games modals. The HUD is engine-rendered so
   we match any descendant with 'hud' or 'stats-bar' / 'status-bar'
   in its class under the two game-modal wrapper prefixes. */
[class*="cpg-modal-box-"] [class*="hud"],
[class*="cpg-modal-box-"] [class*="stats-bar"],
[class*="cpg-modal-box-"] [class*="status-bar"],
[class*="dg-modal-box"] [class*="hud"],
[class*="dg-modal-box"] [class*="stats-bar"],
[class*="dg-modal-box"] [class*="status-bar"] {
    background: var(--cp-header-dropdown-bg-start, #111828) !important;
    border: 1px solid var(--cp-header-border, rgba(255,255,255,0.08)) !important;
    border-radius: 8px !important;
    color: var(--cp-header-text, #ffffff) !important;
}
[class*="cpg-modal-box-"] [class*="hud"] [class*="-label"],
[class*="cpg-modal-box-"] [class*="hud"] [class*="-title"],
[class*="dg-modal-box"] [class*="hud"] [class*="-label"],
[class*="dg-modal-box"] [class*="hud"] [class*="-title"] {
    color: var(--cp-header-text, #ffffff) !important;
    opacity: 0.6 !important;
}
[class*="cpg-modal-box-"] [class*="hud"] [class*="-value"],
[class*="cpg-modal-box-"] [class*="hud"] [class*="-number"],
[class*="dg-modal-box"] [class*="hud"] [class*="-value"],
[class*="dg-modal-box"] [class*="hud"] [class*="-number"] {
    color: var(--cp-header-text, #ffffff) !important;
    font-weight: 700 !important;
}

/* ================================================================
   END COMPOS WIDGET FOUNDATION
   ================================================================ */

/* ================================================================
   OUTER WRAPPER — always flat for seamless stacking
   ================================================================ */

.compos-widget {
    position: relative;
    overflow: visible;
    margin: 0 !important;
    padding: var(--cp-widget-padding, 0px) !important;
    border-radius: 0;
    box-sizing: border-box;
    width: 100%;
    isolation: auto;
    font-family: var(--cp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--cp-font-size-base, 16px);
    line-height: var(--cp-line-height-body, 1.6);
}
@media (max-width: 1023px) {
    .compos-widget { padding: 24px !important; }
}
@media (max-width: 767px) {
    .compos-widget { padding: 16px !important; }
}

/* Elementor container reset — zero all spacing around Compos widgets */
.e-con:has(.compos-widget),
.elementor-section:has(.compos-widget),
.elementor-container:has(.compos-widget),
.elementor-column:has(.compos-widget) {
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important; /* browser reset — Compos widgets handle own bg */
}
.elementor-widget:has(> .elementor-widget-container > .compos-widget) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-widget-container > .compos-widget {
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   COMPOS PAGE TEMPLATE WRAPPER RESET
   Removes legacy LottoVibe theme wrapper padding so Elementor
   content sits flush. Operator controls all spacing via Elementor.
   ========================================================================== */

#content,
.main-contain,
.offcontents,
.container-fluid,
.container,
.row,
.col-lg-12,
.woocommerce-page .container,
.woocommerce .container,
.single-product .container,
.single-product .content-area,
.single-product #primary {
    padding-top: 0 !important; /* Legacy wrapper reset */
    padding-left: 0 !important; /* Legacy wrapper reset */
    padding-right: 0 !important; /* Legacy wrapper reset */
    /* padding-bottom intentionally not reset — allows page-level bottom spacing */
    margin: 0 !important; /* Legacy wrapper reset */
    max-width: 100% !important; /* Full-bleed — no Bootstrap max-width constraint */
    width: 100% !important;
}

/* ================================================================
   CONTENT STRUCTURE
   ================================================================ */

.compos-widget-content {
    position: relative;
    z-index: auto;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--cp-widget-radius, 0px);
    overflow: hidden;
}

/* Header — zero all gaps */
.compos-widget.compos-header {
    padding: 0 !important;
    margin: 0 !important;
}
/* Dashboard nav — flush, no Elementor container gaps */
.compos-widget.compos-dashboard-nav {
    padding: 0 !important; /* browser reset */
    margin: 0 !important; /* browser reset */
    background: transparent !important; /* browser reset — Elementor container bg */
}
.compos-widget.compos-dashboard-nav .compos-widget-content {
    overflow: visible; /* unclip privacy dropdown — backdrop-filter on .cdn-bar creates containing block */
}
/* Full-bleed hero widgets — tuck up under header */
.compos-widget.compos-homepage-hero,
.compos-widget.compos-seller-landing,
.compos-widget.compos-stb-main,
.compos-widget.compos-stb-page {
    background: transparent !important; /* browser reset — Elementor container bg */
    padding: 0 !important;
    margin: -10px 0 0 0 !important;
}
.compos-widget.compos-homepage-hero > .compos-widget-content {
    background: transparent !important; /* browser reset — Elementor container bg */
    padding: 0 !important;
    margin: 0 !important;
}
.compos-widget.compos-homepage-hero .compos-widget-inner,
.compos-widget.compos-homepage-hero .compos-widget-body {
    padding: 0 !important;
    margin: 0 !important;
}
.compos-widget.compos-homepage-hero .compos-widget-body > div[id] {
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
}

.compos-widget-inner {
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.compos-widget-body {
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Content widgets get consistent vertical breathing room so h2 headings
   never tuck under sticky nav. Full-bleed widgets override to 0 below.
   --cp-widget-padding is set in compos_output_brand_css() (default 40px)
   and can be overridden per-widget via the Elementor Widget Padding control. */
.compos-widget-body > div[id] {
    padding: var(--cp-widget-padding, 40px) 36px;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 1023px) {
    .compos-widget-body > div[id] {
        padding: var(--cp-widget-padding, 40px) 24px;
    }
}

@media (max-width: 767px) {
    .compos-widget-body > div[id] {
        padding: var(--cp-widget-padding, 32px) 16px;
    }
}

/* Full-bleed widgets — zero padding */
.compos-widget.compos-dashboard-nav .compos-widget-body > div[id],
.compos-widget.compos-homepage-hero .compos-widget-body > div[id],
.compos-widget.compos_live_draw_viewer .compos-widget-body > div[id],
.compos-widget.compos-merchant-profile .compos-widget-body > div[id],
.compos-widget.compos-seller-landing .compos-widget-body > div[id],
.compos-widget.compos-header .compos-widget-body > div[id],
.compos-widget.compos-product-page .compos-widget-body > div[id],
.compos-widget.compos-hero-split .compos-widget-body > div[id],
.compos-widget.compos-page-banner .compos-widget-body > div[id],
.compos-widget.compos-section-intro .compos-widget-body > div[id] {
    padding: 0 !important;
}

/* Live draw viewer — tuck under header, breathing room below */
.compos-widget.compos_live_draw_viewer {
    margin-top: -20px !important;
    padding-bottom: 40px !important;
}

/* ================================================================
   BACKGROUND CONTEXT (text colour inheritance)
   ================================================================ */

.compos-widget.cp-bg-dark {
    background: var(--cp-bg, #0D0D0D);
}
.compos-widget.cp-bg-light {
    background: var(--cp-surface, #FFFFFF);
}
.compos-widget.cp-bg-transparent {
    background: transparent;
}
.compos-widget.cp-bg-accent {
    background: var(--cp-accent);
}

/* Text colour modes */
.compos-widget.cp-text-light,
.compos-widget.cp-text-auto.cp-bg-dark,
.compos-widget.cp-text-auto.cp-bg-transparent {
    color: var(--cp-text-on-dark);
}
.compos-widget.cp-text-dark,
.compos-widget.cp-text-auto.cp-bg-light {
    color: var(--cp-text-on-light);
}
.compos-widget.cp-text-auto.cp-bg-accent {
    color: var(--cp-text-on-dark);
}

/* Child element colour inheritance — light-on-dark */
.compos-widget.cp-text-auto.cp-bg-dark h1,
.compos-widget.cp-text-auto.cp-bg-dark h2,
.compos-widget.cp-text-auto.cp-bg-dark h3,
.compos-widget.cp-text-auto.cp-bg-dark h4,
.compos-widget.cp-text-auto.cp-bg-dark h5,
.compos-widget.cp-text-auto.cp-bg-dark h6,
.compos-widget.cp-text-auto.cp-bg-dark p,
.compos-widget.cp-text-auto.cp-bg-dark span,
.compos-widget.cp-text-auto.cp-bg-dark li,
.compos-widget.cp-text-auto.cp-bg-dark label,
.compos-widget.cp-text-auto.cp-bg-dark td,
.compos-widget.cp-text-auto.cp-bg-dark a,
.compos-widget.cp-text-auto.cp-bg-transparent h1,
.compos-widget.cp-text-auto.cp-bg-transparent h2,
.compos-widget.cp-text-auto.cp-bg-transparent h3,
.compos-widget.cp-text-auto.cp-bg-transparent h4,
.compos-widget.cp-text-auto.cp-bg-transparent h5,
.compos-widget.cp-text-auto.cp-bg-transparent h6,
.compos-widget.cp-text-auto.cp-bg-transparent p,
.compos-widget.cp-text-auto.cp-bg-transparent span,
.compos-widget.cp-text-auto.cp-bg-transparent li,
.compos-widget.cp-text-auto.cp-bg-transparent label,
.compos-widget.cp-text-auto.cp-bg-transparent td,
.compos-widget.cp-text-auto.cp-bg-transparent a,
.compos-widget.cp-text-light h1,
.compos-widget.cp-text-light h2,
.compos-widget.cp-text-light h3,
.compos-widget.cp-text-light h4,
.compos-widget.cp-text-light h5,
.compos-widget.cp-text-light h6,
.compos-widget.cp-text-light p,
.compos-widget.cp-text-light span,
.compos-widget.cp-text-light li,
.compos-widget.cp-text-light label,
.compos-widget.cp-text-light td,
.compos-widget.cp-text-light a { color: var(--cp-text-on-dark); }

/* Child element colour inheritance — dark-on-light */
.compos-widget.cp-text-auto.cp-bg-light h1,
.compos-widget.cp-text-auto.cp-bg-light h2,
.compos-widget.cp-text-auto.cp-bg-light h3,
.compos-widget.cp-text-auto.cp-bg-light h4,
.compos-widget.cp-text-auto.cp-bg-light h5,
.compos-widget.cp-text-auto.cp-bg-light h6,
.compos-widget.cp-text-auto.cp-bg-light p,
.compos-widget.cp-text-auto.cp-bg-light span,
.compos-widget.cp-text-auto.cp-bg-light li,
.compos-widget.cp-text-auto.cp-bg-light label,
.compos-widget.cp-text-auto.cp-bg-light td,
.compos-widget.cp-text-auto.cp-bg-light a,
.compos-widget.cp-text-dark h1,
.compos-widget.cp-text-dark h2,
.compos-widget.cp-text-dark h3,
.compos-widget.cp-text-dark h4,
.compos-widget.cp-text-dark p,
.compos-widget.cp-text-dark span,
.compos-widget.cp-text-dark li,
.compos-widget.cp-text-dark label,
.compos-widget.cp-text-dark td,
.compos-widget.cp-text-dark a { color: var(--cp-text-on-light); }

/* ================================================================
   TYPOGRAPHY — headings, body text, labels, badges, buttons
   ================================================================ */

/* Global heading styles inside all Compos widgets */
.compos-widget h1,
.compos-widget h2,
.compos-widget h3,
.compos-widget h4,
.compos-widget h5,
.compos-widget h6 {
    color: inherit;
    font-family: var(--cp-font-heading);
    font-weight: var(--cp-font-weight-heading);
    font-style: var(--cp-font-style-heading); /* default: normal — never italic */
    letter-spacing: var(--cp-letter-spacing-heading);
    line-height: var(--cp-line-height-heading);
    text-transform: var(--cp-text-transform-heading);
}

.compos-widget h1 { font-size: var(--cp-font-size-h1); }
.compos-widget h2 { font-size: var(--cp-font-size-h2); }
.compos-widget h3 { font-size: var(--cp-font-size-h3); }
.compos-widget h4 { font-size: var(--cp-font-size-h4); }

/* Global body text styles inside all Compos widgets */
.compos-widget p,
.compos-widget li,
.compos-widget td,
.compos-widget th {
    font-family: var(--cp-font-body);
    font-size: var(--cp-font-size-body);
    font-weight: var(--cp-font-weight-body);
    font-style: var(--cp-font-style-body);
    line-height: var(--cp-line-height-body, 1.6);
}

.compos-widget span {
    font-family: var(--cp-font-body);
}

/* Label utility — scoped to .compos-label only so bare <label> elements inside widgets keep their own styling */
.compos-widget .compos-label {
    font-family: var(--cp-font-body);
    font-size: var(--cp-font-size-label, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-text-muted-on-dark);
}

/* Button text */
.compos-widget .compos-btn,
.compos-widget .cp-btn,
.compos-widget button {
    font-size: var(--cp-font-size-button);
    font-family: var(--cp-font-heading);
}

/* TYPO-3: lead paragraph — larger than body */
.compos-widget .cp-lead {
    font-size: var(--cp-font-size-lead);
    font-family: var(--cp-font-body);
    line-height: var(--cp-line-height-body, 1.6);
}

/* TYPO-3: small text, footnotes, captions */
.compos-widget small,
.compos-widget .cp-small {
    font-size: var(--cp-font-size-small);
    font-family: var(--cp-font-body);
}

/* TYPO-3: badge text inside badges */
.compos-widget .compos-badge {
    font-size: var(--cp-font-size-badge);
}

/* TYPO-3: image/table captions */
.compos-widget figcaption,
.compos-widget .cp-caption {
    font-size: var(--cp-font-size-caption);
    font-family: var(--cp-font-body);
    color: var(--cp-text-muted);
}

/* TYPO-3: all-caps overline text above headings */
.compos-widget .cp-overline {
    font-size: var(--cp-font-size-overline);
    font-family: var(--cp-font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* Muted text */
.compos-widget .cp-text-muted {
    opacity: 0.5;
}
.compos-widget .cp-text-subtle {
    opacity: 0.35;
}

/* ================================================================
   CARD BASE
   ================================================================ */

.compos-widget .compos-card {
    border-radius: var(--cp-card-radius);
    overflow: hidden;
}

/* ================================================================
   BADGE BASE
   ================================================================ */

.compos-widget .compos-badge {
    border-radius: var(--cp-radius-small);
    padding: 2px 8px;
    font-size: var(--cp-font-size-badge);
    font-weight: 600;
    display: inline-block;
}

/* Competition type badge colours */
.compos-type-cash .compos-type-badge,
.compos-badge-cash {
    background: var(--cp-type-cash-badge);
    color: var(--cp-type-cash-text);
}
.compos-type-coins .compos-type-badge,
.compos-badge-coins {
    background: var(--cp-type-coins-badge);
    color: var(--cp-type-coins-text);
}
.compos-type-free .compos-type-badge,
.compos-badge-free {
    background: var(--cp-type-free-badge);
    color: var(--cp-type-free-text);
}
.compos-type-physical .compos-type-badge,
.compos-badge-physical {
    background: var(--cp-type-physical-badge);
    color: var(--cp-type-physical-text);
}
.compos-type-voucher .compos-type-badge,
.compos-badge-voucher {
    background: var(--cp-type-voucher-badge);
    color: var(--cp-type-voucher-text);
}
.compos-type-experience .compos-type-badge,
.compos-badge-experience {
    background: var(--cp-type-experience-badge);
    color: var(--cp-type-experience-text);
}

/* ================================================================
   BUTTON BASE — BUTTON-1 spec v1
   ================================================================ */

.compos-widget .compos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--cp-btn-padding-y) var(--cp-btn-padding-x);
    border-radius: var(--cp-btn-radius);
    font-size: var(--cp-btn-font-size);
    font-weight: var(--cp-btn-font-weight);
    letter-spacing: var(--cp-btn-letter-spacing);
    font-family: var(--cp-font-body);
    line-height: 1;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--cp-btn-transition);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

/* Variant: Primary */
.compos-widget .compos-btn-primary {
    background: var(--cp-btn-primary-bg);
    color: var(--cp-btn-primary-text);
    border-color: var(--cp-btn-primary-border);
    box-shadow: var(--cp-btn-primary-shadow);
}
.compos-widget .compos-btn-primary:hover,
.compos-widget .compos-btn-primary:focus-visible {
    background: var(--cp-btn-primary-hover-bg);
    color: var(--cp-btn-primary-hover-text);
    box-shadow: var(--cp-btn-primary-hover-shadow);
}

/* Variant: Secondary */
.compos-widget .compos-btn-secondary {
    background: var(--cp-btn-secondary-bg);
    color: var(--cp-btn-secondary-text);
    border-color: var(--cp-btn-secondary-border);
    border-width: var(--cp-btn-secondary-border-width);
}
.compos-widget .compos-btn-secondary:hover,
.compos-widget .compos-btn-secondary:focus-visible {
    background: var(--cp-btn-secondary-hover-bg);
    color: var(--cp-btn-secondary-hover-text);
    border-color: var(--cp-btn-secondary-hover-bg);
}

/* Variant: Ghost — fixed tokens, not operator-settable per spec 3.4 */
.compos-widget .compos-btn-ghost {
    background: transparent;
    color: var(--cp-text-muted);
    border-color: var(--cp-border);
}
.compos-widget .compos-btn-ghost:hover,
.compos-widget .compos-btn-ghost:focus-visible {
    background: var(--cp-surface);
    color: var(--cp-text);
}

/* Variant: Destructive — always semantic error red, never accent per spec 3.5 */
.compos-widget .compos-btn-destructive {
    background: var(--cp-status-error);
    color: #FFFFFF;
}
.compos-widget .compos-btn-destructive:hover,
.compos-widget .compos-btn-destructive:focus-visible {
    background: rgba(var(--cp-status-error-rgb), 0.85);
}

/* Disabled state — all variants */
.compos-widget .compos-btn:disabled,
.compos-widget .compos-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Size modifier: small — tight contexts, badges, inline actions */
.compos-widget .compos-btn-sm {
    padding: calc(var(--cp-btn-padding-y) * 0.7) calc(var(--cp-btn-padding-x) * 0.75);
    font-size: 0.875em; /* intentional — em-based button-size modifier relative to base button font-size */
}

/* Size modifier: large — hero CTAs, prominent entry buttons */
.compos-widget .compos-btn-lg {
    padding: calc(var(--cp-btn-padding-y) * 1.4) calc(var(--cp-btn-padding-x) * 1.3);
    font-size: 1.0625em; /* intentional — em-based button-size modifier relative to base button font-size */
}

/* Size modifier: full width — mobile-first stacked layouts */
.compos-widget .compos-btn-full {
    width: 100%;
}

/* Loading state — spinner replaces text, button keeps width */
.compos-widget .compos-btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}
.compos-widget .compos-btn-loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: compos-btn-spin 0.6s linear infinite;
    color: var(--cp-btn-primary-text);
}
@keyframes compos-btn-spin {
    to { transform: rotate(360deg); }
}

/* Type-theme button utilities — legacy currency/type variants.
   Not part of the BUTTON-1 brand-button system; use type-theme accent vars. */
.compos-widget .compos-btn-cash {
    background: var(--cp-type-cash-accent);
    color: var(--cp-type-cash-text);
}
.compos-widget .compos-btn-coins {
    background: var(--cp-type-coins-accent);
    color: var(--cp-type-coins-text);
}

/* ================================================================
   FORM ELEMENTS — FORM-1 spec v1
   ================================================================ */

/* Base input / textarea / select — shared reset and rules */
.compos-widget .compos-input,
.compos-widget .compos-textarea,
.compos-widget .compos-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--cp-input-bg);
    color: var(--cp-input-text, var(--cp-text));
    border: var(--cp-input-border-width) solid var(--cp-input-border, var(--cp-border));
    border-radius: var(--cp-input-radius);
    padding: 0 var(--cp-input-padding-x);
    font-size: var(--cp-input-font-size);
    font-family: var(--cp-font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.compos-widget .compos-input,
.compos-widget .compos-select {
    height: var(--cp-input-height);
    line-height: var(--cp-input-height);
}

.compos-widget .compos-input::placeholder,
.compos-widget .compos-textarea::placeholder {
    color: var(--cp-input-placeholder, var(--cp-text-muted));
    opacity: 1;
}

/* Focus state */
.compos-widget .compos-input:focus,
.compos-widget .compos-textarea:focus,
.compos-widget .compos-select:focus {
    border-color: var(--cp-input-focus-border);
    box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring);
    background: var(--cp-input-focus-bg);
}

/* Error state */
.compos-widget .compos-input.compos-input-error,
.compos-widget .compos-textarea.compos-input-error,
.compos-widget .compos-select.compos-input-error {
    border-color: var(--cp-input-error-border);
    background: var(--cp-input-error-bg);
}
.compos-widget .compos-input.compos-input-error:focus,
.compos-widget .compos-textarea.compos-input-error:focus,
.compos-widget .compos-select.compos-input-error:focus {
    box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-error-ring);
}

/* Success state */
.compos-widget .compos-input.compos-input-success,
.compos-widget .compos-select.compos-input-success {
    border-color: var(--cp-input-success-border);
}

/* Disabled state */
.compos-widget .compos-input:disabled,
.compos-widget .compos-textarea:disabled,
.compos-widget .compos-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Textarea — min-height and resize behaviour */
.compos-widget .compos-textarea {
    height: auto;
    min-height: var(--cp-textarea-min-height);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    line-height: 1.5;
    resize: var(--cp-textarea-resize);
}

/* Select — custom chevron arrow via inline SVG data URI */
.compos-widget .compos-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}
.compos-widget .compos-select::-ms-expand {
    display: none;
}

/* Custom checkbox + radio — hide native input, show CSS-drawn control */
.compos-widget .compos-checkbox,
.compos-widget .compos-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.compos-widget .compos-checkbox input[type="checkbox"],
.compos-widget .compos-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.compos-widget .compos-checkbox .compos-check-box,
.compos-widget .compos-radio .compos-radio-dot {
    flex-shrink: 0;
    width: var(--cp-checkbox-size);
    height: var(--cp-checkbox-size);
    border: var(--cp-input-border-width) solid var(--cp-checkbox-border);
    background: var(--cp-input-bg);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compos-widget .compos-checkbox .compos-check-box {
    border-radius: var(--cp-checkbox-radius);
}
.compos-widget .compos-radio .compos-radio-dot {
    border-radius: 50%;
}

/* Checked state */
.compos-widget .compos-checkbox input:checked ~ .compos-check-box,
.compos-widget .compos-radio input:checked ~ .compos-radio-dot {
    background: var(--cp-checkbox-checked-bg);
    border-color: var(--cp-checkbox-checked-border);
}

/* Tick mark — CSS-drawn on checkbox */
.compos-widget .compos-checkbox input:checked ~ .compos-check-box::after {
    content: '';
    width: 5px;
    height: 9px;
    border: 2px solid var(--cp-checkbox-tick);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

/* Focus rings on custom controls */
.compos-widget .compos-checkbox input:focus-visible ~ .compos-check-box,
.compos-widget .compos-radio input:focus-visible ~ .compos-radio-dot {
    box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring);
}

/* Toggle switch */
.compos-widget .compos-toggle {
    position: relative;
    display: inline-block;
    width: var(--cp-toggle-width);
    height: var(--cp-toggle-height);
    flex-shrink: 0;
}
.compos-widget .compos-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.compos-widget .compos-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--cp-toggle-off-bg);
    border-radius: var(--cp-toggle-height);
    transition: var(--cp-toggle-transition);
    cursor: pointer;
}
.compos-widget .compos-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(var(--cp-toggle-height) - 6px);
    height: calc(var(--cp-toggle-height) - 6px);
    background: var(--cp-toggle-thumb);
    border-radius: 50%;
    transition: var(--cp-toggle-transition);
    box-shadow: var(--cp-shadow-sm);
}
.compos-widget .compos-toggle input:checked ~ .compos-toggle-track {
    background: var(--cp-toggle-on-bg);
}
.compos-widget .compos-toggle input:checked ~ .compos-toggle-thumb {
    transform: translateX(calc(var(--cp-toggle-width) - var(--cp-toggle-height)));
}
.compos-widget .compos-toggle input:focus-visible ~ .compos-toggle-track {
    box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring);
}

/* Form label, field wrapper, error + hint text */
.compos-widget .compos-label {
    display: block;
    font-size: var(--cp-font-size-label);
    font-weight: 600;
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
}
.compos-widget .compos-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}
.compos-widget .compos-field-error {
    font-size: var(--cp-font-size-small);
    color: var(--cp-status-error);
    margin-top: 0.25rem;
}
.compos-widget .compos-field-hint {
    font-size: var(--cp-font-size-small);
    color: var(--cp-text-muted);
    margin-top: 0.25rem;
}

/* ================================================================
   FORM-1 — WooCommerce integration (spec Section 5)
   The only place in Compos where non-.compos-* selectors are used for
   form styling — WooCommerce's native markup can't take .compos-* classes.
   ================================================================ */
.woocommerce .woocommerce-Input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-page .woocommerce-Input,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="tel"],
.woocommerce-page textarea,
.woocommerce-page select {
    background: var(--cp-input-bg) !important; /* WooCommerce overrides its own styles — !important required */
    color: var(--cp-input-text, var(--cp-text)) !important; /* WooCommerce overrides its own styles — !important required */
    border: var(--cp-input-border-width) solid var(--cp-input-border, var(--cp-border)) !important; /* WooCommerce overrides its own styles — !important required */
    border-radius: var(--cp-input-radius) !important; /* WooCommerce overrides its own styles — !important required */
    height: auto;
    min-height: var(--cp-input-height);
    padding: 0 var(--cp-input-padding-x);
    font-size: var(--cp-input-font-size);
    font-family: var(--cp-font-body);
    box-shadow: none !important; /* WooCommerce adds default shadow — !important required */
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus {
    border-color: var(--cp-input-focus-border) !important; /* WooCommerce overrides focus — !important required */
    box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring) !important; /* WooCommerce overrides focus — !important required */
}

/* ================================================================
   PROGRESS BAR
   ================================================================ */

.compos-widget .compos-progress {
    height: 4px;
    background: var(--cp-border);
    border-radius: var(--cp-radius-pill);
    overflow: hidden;
}
.compos-widget .compos-progress-bar {
    height: 100%;
    background: var(--cp-accent);
    border-radius: var(--cp-radius-pill);
    transition: width 0.3s ease;
}

/* ================================================================
   COUNTDOWN BOXES
   ================================================================ */

.compos-widget .compos-countdown-box {
    border-radius: var(--cp-radius-small);
    background: var(--cp-mid);
    padding: 8px 12px;
    text-align: center;
    min-width: 48px;
}

/* ================================================================
   IMAGES
   ================================================================ */

.compos-widget img {
    max-width: 100%;
    height: auto;
}

/* ================================================================
   RESPONSIVE BASE RULES
   ================================================================ */

/* Mobile first — base styles apply to all sizes */

/* Widget padding scales down on mobile */
@media (max-width: 767px) {

    /* Cards go full width on mobile */
    .compos-widget .compos-card {
        width: 100%;
    }

    /* Countdown boxes smaller on mobile */
    .compos-widget .compos-countdown-box {
        min-width: 36px;
        padding: 6px 8px;
    }

    /* Buttons full width on mobile */
    .compos-widget .compos-btn {
        width: 100%;
        text-align: center;
    }

    /* Type badges stay inline */
    .compos-widget .compos-badge {
        font-size: 0.7em; /* intentional — em-based responsive-breakpoint override relative to parent */
        padding: 2px 6px;
    }

    /* Progress bars full width */
    .compos-widget .compos-progress {
        width: 100%;
    }

    /* Hide decorative images on mobile */
    .compos-decor-left,
    .compos-decor-right {
        display: none;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Decorative images smaller on tablet */
    .compos-decor-left,
    .compos-decor-right {
        max-width: 80px;
    }

    /* Buttons auto width on tablet */
    .compos-widget .compos-btn {
        width: auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {

    .compos-decor-left,
    .compos-decor-right {
        display: block;
    }

    .compos-widget .compos-btn {
        width: auto;
    }
}

/* Touch targets — minimum 44px on mobile */
@media (max-width: 767px) {
    .compos-widget .compos-btn,
    .compos-widget button:not(.compos-slider-dot),
    .compos-widget a.compos-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Background images — cover on all sizes */
.compos-widget[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Compliance footer — bottom bar with licence, helpline, age etc */
.compos-compliance-footer,
.compos-compliance-footer span,
.compos-compliance-footer .compos-cf-age,
.compos-compliance-footer .compos-cf-helpline,
.compos-compliance-footer .compos-cf-licence,
.compos-compliance-footer .compos-cf-permit,
.compos-compliance-footer .compos-cf-nopurchase,
.compos-compliance-footer .compos-cf-sweep,
.compos-compliance-footer .compos-cf-operator {
    font-family: var(--cp-font-body, inherit);
    font-size: var(--cp-font-size-caption);
    color: var(--cp-footer-copyright-text, var(--cp-footer-text, var(--cp-surface-text-muted))) !important; /* override inline style — theme.css footer a rules */
    text-align: center;
    line-height: 1.6;
}
.compos-compliance-footer {
    padding: 16px 20px;
}
.compos-compliance-footer a,
.compos-compliance-footer a span {
    color: var(--cp-footer-copyright-link, var(--cp-footer-link, var(--cp-surface-text-muted))) !important; /* override inline style — theme.css footer a rules */
    text-decoration: none;
}
.compos-compliance-footer a:hover,
.compos-compliance-footer a:hover span {
    color: var(--cp-footer-link-hover, var(--cp-surface-text)) !important; /* override inline style — theme.css footer a rules */
}
.compos-cf-sep {
    opacity: 0.3;
    margin: 0 4px;
}
.compos-cf-age {
    font-weight: 800;
}

/* Hide WordPress/legacy theme chrome sitewide */
.edit-link, span.edit-link, .entry-footer, .post-edit-link, .site-info, .site-description, .site-footer, footer.site-footer, #colophon, .footer-widgets, #footer { display: none !important; /* WP template chrome hidden */ }

/* ================================================================
   COMPOS WIDGET VISIBILITY — per-device hide toggles
   ================================================================ */
@media (max-width: 767px) {
    .compos-widget.hide-mobile { display: none !important; /* Compos visibility toggle */ }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .compos-widget.hide-tablet { display: none !important; /* Compos visibility toggle */ }
}
@media (min-width: 1024px) {
    .compos-widget.hide-desktop { display: none !important; /* Compos visibility toggle */ }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .compos-widget * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   CREATOR-1 — Compos Stats widget
   --stats-cols is a layout integer set inline — not a colour.
   ============================================================ */
.compos-stats-title {
    margin: 0 0 var(--cp-space-md, 1.5rem) 0;
    font-size: var(--cp-font-size-h3);
    text-align: center;
}

.compos-stats {
    display: grid;
    grid-template-columns: repeat(var(--stats-cols, 3), 1fr);
    gap: var(--cp-space-md, 1.5rem);
}

.compos-stats--cols-2 { --stats-cols: 2; }
.compos-stats--cols-3 { --stats-cols: 3; }
.compos-stats--cols-4 { --stats-cols: 4; }

@media (max-width: 900px) {
    .compos-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .compos-stats { grid-template-columns: 1fr; }
}

.compos-stat-item {
    text-align: center;
    padding: var(--cp-space-md, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cp-space-xs, 0.25rem);
}

.compos-stat-item .stat-icon {
    font-size: 2rem;
    color: var(--cp-accent);
    margin-bottom: var(--cp-space-xs, 0.25rem);
    display: block;
    line-height: 1;
}

.compos-stat-item .stat-number {
    font-family: var(--cp-font-heading), inherit;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    color: var(--cp-accent);
    line-height: 1;
    display: block;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.compos-stat-item .stat-label {
    font-size: var(--cp-font-size-sm);
    color: var(--cp-text-muted);
    margin-top: var(--cp-space-xs, 0.25rem);
    display: block;
}

.compos-stats--dividers .compos-stat-item {
    border-right: 1px solid var(--cp-border);
}
.compos-stats--dividers .compos-stat-item:last-child { border-right: 0; }

@media (max-width: 900px) {
    .compos-stats--dividers .compos-stat-item { border-right: 0; }
}

/* ============================================================
   CREATOR-1 — Compos Team widget
   ============================================================ */
/* -- Team (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

.compos-team-member .member-social a:hover,
.compos-team-member .member-social a:focus-visible {
    color: var(--cp-accent);
    outline: none;
}

/* ============================================================
   CREATOR-1 — Compos Testimonials widget
   ============================================================ */
/* -- Testimonials (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-2 — Compos Services widget
   ============================================================ */
/* -- Services (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* -- Gallery (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-2 — Compos Video widget
   ============================================================ */
.compos-video {
    position: relative;
    width: 100%;
    background: var(--cp-dark, #000); /* #000 fallback — video letterbox background, not brand colour */
    overflow: hidden;
    border-radius: var(--cp-widget-radius, 0);
}

.compos-video--ratio-16-9 { aspect-ratio: 16 / 9; }
.compos-video--ratio-4-3  { aspect-ratio: 4 / 3; }
.compos-video--ratio-1-1  { aspect-ratio: 1; }

.compos-video iframe,
.compos-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.compos-video-poster {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
}

.compos-video-poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compos-video-play-btn {
    width: 72px;
    height: 72px;
    background: var(--cp-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease;
    position: relative;
    z-index: 1;
}

.compos-video-poster:hover .compos-video-play-btn,
.compos-video-poster:focus-visible .compos-video-play-btn {
    transform: scale(1.1);
    outline: none;
}

.compos-video-play-btn i {
    font-size: 2rem;
    color: #fff; /* #fff intentional — icon on accent circle is universal */
    line-height: 1;
}

.compos-video--play-minimal .compos-video-play-btn {
    background: transparent;
    border: 2px solid #fff; /* #fff intentional — outline on dark poster is universal */
}

.compos-video-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-text-on-dark);
    font-size: var(--cp-font-size-sm);
    text-align: center;
    padding: var(--cp-space-md, 1.5rem);
}

/* ============================================================
   CREATOR-3 — Compos Countdown widget
   ============================================================ */
/* -- Countdown (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

.compos-countdown-expired {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-body, 1rem);
    font-weight: 500;
}

/* ============================================================
   CREATOR-3 — Compos Social Proof (logo bar)
   ============================================================ */
/* -- Social Proof (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-3 — Compos Newsletter widget
   ============================================================ */
/* -- Newsletter (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-3 — Compos Before/After comparison
   --split-pos is a layout integer (0–100), set inline and updated
   by JS drag/click/keyboard — not a colour.
   ============================================================ */
/* -- Before/After (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-3 — Compos Icon List widget
   ============================================================ */
/* -- Icon List (v3 — scoped CSS in widget PHP) -- */
.compos-icon-list-REMOVED_v3 {
    display: none;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-xs, 0.25rem);
}

.compos-icon-list--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--cp-space-sm, 0.5rem);
}

.compos-icon-list--two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
}

@media (max-width: 540px) {
    .compos-icon-list--two-column { grid-template-columns: 1fr; }
}

.compos-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-xs, 0.25rem);
    color: var(--cp-text);
    line-height: 1.5;
}

.compos-icon-list-item i {
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
}

.compos-icon-list--icon-accent  .compos-icon-list-item i { color: var(--cp-accent); }
.compos-icon-list--icon-success .compos-icon-list-item i { color: var(--cp-status-success); }
.compos-icon-list--icon-muted   .compos-icon-list-item i { color: var(--cp-text-muted); }
.compos-icon-list--icon-text    .compos-icon-list-item i { color: var(--cp-text); }

.compos-icon-list--size-sm .compos-icon-list-item i { font-size: 0.875rem; }
.compos-icon-list--size-md .compos-icon-list-item i { font-size: 1rem; }
.compos-icon-list--size-lg .compos-icon-list-item i { font-size: 1.25rem; }

.compos-icon-list--dividers .compos-icon-list-item {
    padding-bottom: var(--cp-space-xs, 0.25rem);
    border-bottom: 1px solid var(--cp-border);
}
.compos-icon-list--dividers .compos-icon-list-item:last-child { border-bottom: 0; padding-bottom: 0; }

.compos-icon-list-item a {
    display: flex;
    align-items: flex-start;
    gap: var(--cp-space-xs, 0.25rem);
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

.compos-icon-list-item a:hover,
.compos-icon-list-item a:focus-visible {
    color: var(--cp-accent);
    outline: none;
}

/* ============================================================
   CREATOR-4 — Compos Tabs widget
   ============================================================ */
.compos-tabs-nav {
    display: flex;
    gap: 2px;
    margin: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cp-border);
}

.compos-tab-btn {
    background: transparent;
    border: 0;
    padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
    cursor: pointer;
    color: var(--cp-text-muted);
    font-weight: 500;
    font-size: var(--cp-font-size-sm);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    font-family: inherit;
}

.compos-tab-btn i.ti { line-height: 1; }

.compos-tab-btn:hover { color: var(--cp-text); }

.compos-tab-btn.is-active {
    color: var(--cp-text);
    border-bottom-color: var(--cp-accent);
}

.compos-tab-panel { display: none; padding: var(--cp-space-md, 1.5rem) 0; }
.compos-tab-panel.is-active { display: block; }

/* Boxed variant */
.compos-tabs--boxed .compos-tabs-nav { border-bottom: 1px solid var(--cp-border); }
.compos-tabs--boxed .compos-tab-btn {
    border: 1px solid var(--cp-border);
    border-bottom-color: transparent;
    border-radius: var(--cp-radius-sm) var(--cp-radius-sm) 0 0;
}
.compos-tabs--boxed .compos-tab-btn.is-active {
    background: var(--cp-surface);
    border-color: var(--cp-border);
    border-bottom-color: var(--cp-surface);
    color: var(--cp-text);
}

/* Pill variant */
.compos-tabs--pill .compos-tabs-nav { border: 0; }
.compos-tabs--pill .compos-tab-btn {
    border-radius: 99px;
    padding: var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
    margin-bottom: 0;
}
.compos-tabs--pill .compos-tab-btn.is-active {
    background: var(--cp-accent);
    color: var(--cp-text-on-dark);
    border-bottom-color: transparent;
}

/* Horizontal bottom variant */
.compos-tabs--horizontal-bottom { display: flex; flex-direction: column-reverse; }

/* Vertical */
.compos-tabs--vertical {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--cp-space-md, 1.5rem);
}

.compos-tabs--vertical .compos-tabs-nav {
    flex-direction: column;
    margin-bottom: 0;
    border-right: 1px solid var(--cp-border);
    border-bottom: 0;
}

.compos-tabs--vertical .compos-tab-btn {
    text-align: left;
    border-bottom: 0;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -1px;
    justify-content: flex-start;
    width: 100%;
}

.compos-tabs--vertical .compos-tab-btn.is-active {
    border-right-color: var(--cp-accent);
}

.compos-tabs--vertical .compos-tab-panel {
    padding: var(--cp-space-xs, 0.25rem) 0 var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
}

@media (max-width: 720px) {
    .compos-tabs--vertical { grid-template-columns: 1fr; }
    .compos-tabs--vertical .compos-tabs-nav { border-right: 0; border-bottom: 1px solid var(--cp-border); flex-direction: row; }
    .compos-tabs--vertical .compos-tab-btn { border-right: 0; border-bottom: 2px solid transparent; }
    .compos-tabs--vertical .compos-tab-btn.is-active { border-bottom-color: var(--cp-accent); border-right-color: transparent; }
    .compos-tabs--vertical .compos-tab-panel { padding: var(--cp-space-md, 1.5rem) 0; }
}

/* ============================================================
   CREATOR-4 — Compos Cards Grid widget
   ============================================================ */
.compos-cards-grid {
    display: grid;
    gap: var(--cp-space-md, 1.5rem);
    /* grid-template-columns removed — v3 widget handles its own columns in scoped <style> */
}

.compos-cards-grid--equal { align-items: stretch; }

.compos-card-item {
    background: var(--cp-surface);
    border-radius: var(--cp-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.compos-cards-grid--bordered .compos-card-item { border: 1px solid var(--cp-border); }
.compos-card-item:hover {
    border-color: var(--cp-accent);
    box-shadow: 0 0 0 1px rgba(var(--cp-accent-rgb,255,101,14),0.3), var(--cp-shadow-md);
    transform: translateY(-3px);
}

.compos-card-item .card-image { flex-shrink: 0; overflow: hidden; }
.compos-card-item .card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.compos-card-item:hover .card-image img { transform: scale(1.05); }

.compos-card-item .card-body {
    padding: var(--cp-space-md, 1.5rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-xs, 0.25rem);
}

.compos-card-item .card-eyebrow {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.compos-card-item h3 {
    font-size: var(--cp-font-size-h3);
    margin: 0;
    color: var(--cp-text);
}

.compos-card-item p {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-sm);
    flex: 1;
    margin: 0;
}

.compos-card-item .card-action {
    margin-top: auto;
    padding-top: var(--cp-space-sm, 0.5rem);
}

/* Image left variant */
.compos-cards-grid--img-left .compos-card-item {
    flex-direction: row;
}

.compos-cards-grid--img-left .card-image {
    width: 40%;
    flex-shrink: 0;
}

.compos-cards-grid--img-left .card-image img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 100%;
}

@media (max-width: 540px) {
    .compos-cards-grid--img-left .compos-card-item { flex-direction: column; }
    .compos-cards-grid--img-left .card-image { width: 100%; }
    .compos-cards-grid--img-left .card-image img { aspect-ratio: 16 / 9; height: auto; }
}

/* ============================================================
   CREATOR-4 — Compos Timeline widget
   ============================================================ */
/* -- Timeline (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-4 — Compos Map widget
   ============================================================ */
/* -- Map (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* -- Progress Bars (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-5 — Compos Hero (full-bleed + split) + .compos-btn--white
   --hero-overlay-opacity is a numeric opacity set inline from PHP,
   not a colour.
   ============================================================ */

/* Shared hero frame */
.compos-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-text-on-dark);
}

.compos-hero--full-screen   { min-height: 100vh; }
.compos-hero--three-quarter { min-height: 75vh; }
.compos-hero--half          { min-height: 50vh; }
.compos-hero--auto          { min-height: 400px; }

.compos-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.compos-hero-bg video,
.compos-hero-bg iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    pointer-events: none;
}

.compos-hero--bg-gradient .compos-hero-bg {
    background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent2, var(--cp-accent)));
}

.compos-hero-overlay {
    position: absolute;
    inset: 0;
    opacity: var(--hero-overlay-opacity, 0.5);
    z-index: 1;
    pointer-events: none;
}

.compos-hero--overlay-dark   .compos-hero-overlay {
    background: linear-gradient(135deg,
        rgba(var(--cp-dark-rgb,14,22,40),1) 0%,
        rgba(var(--cp-dark-rgb,14,22,40),0.6) 100%); /* rgba dark-rgb — hero overlay gradient */
}
.compos-hero--overlay-light  .compos-hero-overlay { background: rgba(255,255,255,0.6); } /* rgba white — light hero overlay */
.compos-hero--overlay-accent .compos-hero-overlay {
    background: linear-gradient(135deg,
        rgba(var(--cp-accent-rgb,255,101,14),0.9) 0%,
        rgba(var(--cp-accent-rgb,255,101,14),0.5) 100%); /* rgba accent-rgb — accent hero overlay */
}

/* Subtle parallax — bg scales on hover for filmic feel */
.compos-hero-bg { transition: transform 8s ease-out; }
.compos-hero:hover .compos-hero-bg { transform: scale(1.03); }

.compos-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--cp-space-xl, 4rem) var(--cp-space-md, 1.5rem);
    width: 100%;
    max-width: 900px;
}

.compos-hero--content-centre .compos-hero-content { margin: 0 auto; text-align: center; }
.compos-hero--content-left   .compos-hero-content { margin-right: auto; text-align: left; }
.compos-hero--content-right  .compos-hero-content { margin-left: auto; text-align: right; }

.compos-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--cp-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cp-accent);
    background: rgba(var(--cp-accent-rgb,255,101,14),0.12);
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: var(--cp-space-sm);
    border: 1px solid rgba(var(--cp-accent-rgb,255,101,14),0.3);
}

.compos-hero-heading {
    font-size: var(--cp-font-size-h1);
    font-weight: 800;
    color: var(--cp-text-on-dark);
    line-height: 1.1;
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    letter-spacing: -0.02em;
}

.compos-hero-heading--xl { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.compos-hero-heading--lg { font-size: clamp(2rem,   4vw, 3.5rem); }
.compos-hero-heading--md { font-size: clamp(1.75rem,3vw, 2.5rem); }

.compos-hero-subheading {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.8);
    max-width: 680px;
    margin: 0 0 var(--cp-space-lg, 3rem) 0;
    line-height: 1.6;
}

.compos-hero--content-centre .compos-hero-subheading { margin-left: auto; margin-right: auto; }
.compos-hero--content-right  .compos-hero-subheading { margin-left: auto; }

.compos-hero-actions {
    display: flex;
    gap: var(--cp-space-sm, 0.5rem);
    flex-wrap: wrap;
    align-items: center;
}

.compos-hero--content-centre .compos-hero-actions { justify-content: center; }
.compos-hero--content-right  .compos-hero-actions { justify-content: flex-end; }

/* Glass/white button variant — used on hero contexts only */
.compos-btn--white {
    background: rgba(255,255,255,0.15); /* rgba white — hero glass button, not brand colour */
    color: #fff; /* #fff intentional — white text on hero glass */
    border: 2px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.compos-btn--white:hover,
.compos-btn--white:focus-visible {
    background: rgba(255,255,255,0.25);
    color: #fff;
    outline: none;
}

/* Scroll indicator */
.compos-hero-scroll {
    position: absolute;
    bottom: var(--cp-space-md, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    animation: compos-hero-bounce 2s infinite;
    z-index: 2;
    font-size: 1.5rem;
}

@keyframes compos-hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 480px) {
    .compos-hero-heading--xl { font-size: 2.25rem; }
    .compos-hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .compos-hero-actions .compos-btn { justify-content: center; }
}

/* -- Hero Split ---------------------------------------------- */
.compos-hero-split {
    display: grid;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.compos-hero-split--auto                { min-height: auto; }
.compos-hero-split--viewport-half       { min-height: 50vh; }
.compos-hero-split--viewport-two-thirds { min-height: 66vh; }

.compos-hero-split--bg-dark    { background: var(--cp-dark, #0e1628); color: var(--cp-text-on-dark); }
.compos-hero-split--bg-light   { background: var(--cp-light, #fff); color: var(--cp-text); }
.compos-hero-split--bg-surface { background: var(--cp-surface); color: var(--cp-text); }

.compos-hero-split--bg-dark .compos-hero-heading { color: var(--cp-text-on-dark); }
.compos-hero-split--bg-dark .compos-hero-subheading { color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.8); }

.compos-hero-split--bg-light .compos-hero-heading,
.compos-hero-split--bg-surface .compos-hero-heading { color: var(--cp-text); }
.compos-hero-split--bg-light .compos-hero-subheading,
.compos-hero-split--bg-surface .compos-hero-subheading { color: var(--cp-text-muted); }

.compos-hero-split-content {
    padding: var(--cp-space-xl, 4rem) var(--cp-space-lg, 3rem);
}

.compos-hero-split-visual {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compos-hero-split-visual img,
.compos-hero-split-visual iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.compos-hero-split--content-right .compos-hero-split-content { order: 2; }
.compos-hero-split--content-right .compos-hero-split-visual  { order: 1; }

.compos-hero-split--visual-contained .compos-hero-split-visual {
    padding: var(--cp-space-lg, 3rem);
}
.compos-hero-split--visual-contained .compos-hero-split-visual img,
.compos-hero-split--visual-contained .compos-hero-split-visual iframe {
    border-radius: var(--cp-radius-md);
    box-shadow: var(--cp-shadow-lg);
    height: auto;
}

.compos-hero-split--visual-floating .compos-hero-split-visual {
    padding: var(--cp-space-lg, 3rem);
}
.compos-hero-split--visual-floating .compos-hero-split-visual img {
    border-radius: var(--cp-radius-lg, 16px);
    box-shadow: var(--cp-shadow-lg);
    transform: rotate(-2deg);
    transition: transform 300ms ease;
    height: auto;
}
.compos-hero-split--visual-floating .compos-hero-split-visual:hover img { transform: rotate(0deg); }

.compos-hero-badges {
    display: flex;
    gap: var(--cp-space-sm, 0.5rem);
    flex-wrap: wrap;
    margin-top: var(--cp-space-md, 1.5rem);
}

.compos-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
}

.compos-hero-split--bg-dark .compos-hero-badge {
    color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.65);
}

.compos-hero-badge i { color: var(--cp-accent); line-height: 1; }

.compos-hero-split-placeholder {
    padding: var(--cp-space-lg, 3rem);
    border: 2px dashed var(--cp-border);
    border-radius: var(--cp-radius-md);
    color: var(--cp-text-muted);
    text-align: center;
    background: var(--cp-surface);
}

@media (max-width: 900px) {
    .compos-hero-split { grid-template-columns: 1fr; }
    .compos-hero-split--content-right .compos-hero-split-content { order: 1; }
    .compos-hero-split--content-right .compos-hero-split-visual  { order: 2; }
    .compos-hero-split-visual { min-height: 280px; }
    .compos-hero-split-content { padding: var(--cp-space-lg, 3rem) var(--cp-space-md, 1.5rem); }
}

/* ============================================================
   CREATOR-5 — Compos Section Intro widget
   ============================================================ */
.compos-section-intro {
    margin-bottom: var(--cp-space-lg, 3rem);
}

.compos-section-intro--centre { text-align: center; margin-left: auto; margin-right: auto; }
.compos-section-intro--left   { text-align: left;   margin-right: auto; }
.compos-section-intro--right  { text-align: right;  margin-left: auto; }

.compos-section-intro--narrow { max-width: 480px; }
.compos-section-intro--medium { max-width: 640px; }
.compos-section-intro--wide   { max-width: 860px; }
.compos-section-intro--full   { max-width: 100%; }

.compos-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-xs, 0.25rem);
    font-size: var(--cp-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-accent);
    margin-bottom: var(--cp-space-sm, 0.5rem);
}

.compos-section-eyebrow.has-divider::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--cp-accent);
    margin-right: var(--cp-space-xs, 0.25rem);
}

.compos-section-intro h1,
.compos-section-intro h2,
.compos-section-intro h3 {
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    font-weight: 700;
    color: var(--cp-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.compos-section-intro h1 { font-size: clamp(2rem, 4vw, 3rem); }
.compos-section-intro h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.compos-section-intro h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }

.compos-section-intro p {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-body, 1.0625rem);
    line-height: 1.7;
    margin: 0 0 var(--cp-space-md, 1.5rem) 0;
}

.compos-section-intro .compos-btn {
    margin-top: var(--cp-space-xs, 0.25rem);
}

/* ============================================================
   CREATOR-5 — Compos Page Banner widget
   ============================================================ */
.compos-page-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.compos-page-banner--sm { min-height: 200px; }
.compos-page-banner--md { min-height: 320px; }
.compos-page-banner--lg { min-height: 480px; }

.compos-page-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.compos-page-banner--colour-surface .compos-page-banner-bg { background: var(--cp-surface); }
.compos-page-banner--colour-dark    .compos-page-banner-bg { background: var(--cp-dark, #0e1628); } /* #0e1628 fallback — dark banner variant */
.compos-page-banner--colour-accent  .compos-page-banner-bg { background: var(--cp-accent); }

.compos-page-banner--bg-gradient .compos-page-banner-bg {
    background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent2, var(--cp-accent)));
}

.compos-page-banner--bg-none { background: transparent; }

.compos-page-banner-overlay {
    position: absolute;
    inset: 0;
    background: var(--cp-dark, #0e1628); /* #0e1628 fallback — overlay on background image */
    opacity: var(--pb-overlay-opacity, 0.4);
    z-index: 1;
    pointer-events: none;
}

.compos-page-banner-content {
    position: relative;
    z-index: 2;
    padding: var(--cp-space-lg, 3rem) var(--cp-space-md, 1.5rem);
    width: 100%;
    color: var(--cp-text-on-dark);
}

.compos-page-banner--bg-none .compos-page-banner-content,
.compos-page-banner--colour-surface .compos-page-banner-content {
    color: var(--cp-text);
}

.compos-page-banner--centre .compos-page-banner-content { text-align: center; }
.compos-page-banner--left   .compos-page-banner-content { text-align: left; }

.compos-page-banner h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    color: inherit;
    margin: 0 0 var(--cp-space-xs, 0.25rem) 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.compos-page-banner .page-subtitle {
    color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.75);
    font-size: var(--cp-font-size-body, 1rem);
    margin: 0;
}

.compos-page-banner--bg-none .page-subtitle,
.compos-page-banner--colour-surface .page-subtitle {
    color: var(--cp-text-muted);
}

/* Breadcrumb */
/* ============================================================
   CREATOR-5 — Compos Divider / Spacer widget
   ============================================================ */
.compos-divider { width: 100%; }

/* Vertical spacing scales */
.compos-divider--pt-none { padding-top: 0; }
.compos-divider--pt-xs   { padding-top: var(--cp-space-xs, 0.25rem); }
.compos-divider--pt-sm   { padding-top: var(--cp-space-sm, 0.5rem); }
.compos-divider--pt-md   { padding-top: var(--cp-space-md, 1.5rem); }
.compos-divider--pt-lg   { padding-top: var(--cp-space-lg, 3rem); }
.compos-divider--pt-xl   { padding-top: var(--cp-space-xl, 4rem); }

.compos-divider--pb-none { padding-bottom: 0; }
.compos-divider--pb-xs   { padding-bottom: var(--cp-space-xs, 0.25rem); }
.compos-divider--pb-sm   { padding-bottom: var(--cp-space-sm, 0.5rem); }
.compos-divider--pb-md   { padding-bottom: var(--cp-space-md, 1.5rem); }
.compos-divider--pb-lg   { padding-bottom: var(--cp-space-lg, 3rem); }
.compos-divider--pb-xl   { padding-bottom: var(--cp-space-xl, 4rem); }

/* Line */
.compos-divider-line {
    position: relative;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: var(--cp-border);
    margin: 0;
}

.compos-divider-line--solid  { border-top-style: solid; }
.compos-divider-line--dashed { border-top-style: dashed; }
.compos-divider-line--dotted { border-top-style: dotted; }
.compos-divider-line--double { border-top-style: double; border-top-width: 3px; }

.compos-divider-line--thin   { border-top-width: 1px; }
.compos-divider-line--medium { border-top-width: 2px; }
.compos-divider-line--thick  { border-top-width: 4px; }
.compos-divider-line--double.compos-divider-line--thick { border-top-width: 6px; }

.compos-divider-line--full          { width: 100%; }
.compos-divider-line--three-quarter { width: 75%; margin: 0 auto; }
.compos-divider-line--half          { width: 50%; margin: 0 auto; }
.compos-divider-line--quarter       { width: 25%; margin: 0 auto; }

.compos-divider-line--border { border-top-color: var(--cp-border); }
.compos-divider-line--accent { border-top-color: var(--cp-accent); }
.compos-divider-line--muted  { border-top-color: var(--cp-text-muted); }
.compos-divider-line--text   { border-top-color: var(--cp-text); }

/* Icon overlay sits on the line */
.compos-divider-line--with-icon { text-align: center; }

.compos-divider-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 var(--cp-space-sm, 0.5rem);
    color: var(--cp-text-muted);
    background: var(--cp-bg, var(--cp-surface));
    line-height: 1;
    font-size: 1rem;
}

.compos-divider-line--accent .compos-divider-icon { color: var(--cp-accent); }

/* Space */
.compos-divider-space--sm { height: 2rem; }
.compos-divider-space--md { height: 4rem; }
.compos-divider-space--lg { height: 6rem; }
.compos-divider-space--xl { height: 8rem; }

/* Dots */
.compos-divider-dots {
    display: flex;
    justify-content: center;
    gap: var(--cp-space-sm, 0.5rem);
}

.compos-divider-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cp-border);
}

/* Gradient fade */
.compos-divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cp-border), transparent);
}

/* ============================================================
   CREATOR-6 — Compos Post Featured widget
   ============================================================ */
.compos-post-featured {
    margin-bottom: var(--cp-space-lg, 3rem);
}

/* Single-large hero variant */
.compos-post-featured--single-large .compos-featured-card--hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--cp-radius-md);
    display: flex;
    align-items: flex-end;
    min-height: 480px;
    background: var(--cp-surface);
}

.compos-post-featured--height-sm .compos-featured-card--hero { min-height: 320px; }
.compos-post-featured--height-md .compos-featured-card--hero { min-height: 400px; }
.compos-post-featured--height-lg .compos-featured-card--hero { min-height: 480px; }

.compos-featured-card--hero .featured-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.compos-featured-card--hero .featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(var(--cp-dark-rgb, 14,22,40), 0.85) 0%, transparent 60%);
    /* rgba(dark-rgb) token with fallback 14,22,40 — not a hardcoded colour */
    z-index: 1;
    pointer-events: none;
}

.compos-featured-card--hero .featured-content {
    position: relative;
    z-index: 2;
    padding: var(--cp-space-lg, 3rem);
    width: 100%;
    color: var(--cp-text-on-dark);
}

.compos-featured-card--hero .featured-title {
    font-size: clamp(1.5rem, 3vw, var(--cp-font-size-h2, 2rem));
    font-weight: 800;
    color: var(--cp-text-on-dark);
    line-height: 1.2;
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    letter-spacing: -0.01em;
}

.compos-featured-card--hero .featured-title a {
    color: var(--cp-text-on-dark);
    text-decoration: none;
}
.compos-featured-card--hero .featured-title a:hover { color: var(--cp-accent); }

.compos-featured-card--hero .featured-excerpt {
    color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.85);
    font-size: var(--cp-font-size-body, 1rem);
    line-height: 1.6;
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    max-width: 720px;
}

.compos-featured-card--hero .compos-post-meta {
    color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.75);
}
.compos-featured-card--hero .compos-post-meta i { color: var(--cp-accent); }

/* Two-column layout */
.compos-post-featured--two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cp-space-md, 1.5rem);
}

/* One-plus-two */
.compos-post-featured--one-plus-two {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--cp-space-md, 1.5rem);
}
.compos-post-featured--one-plus-two .compos-featured-card--hero { min-height: 420px; }
.compos-post-featured--one-plus-two .featured-secondary {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-md, 1.5rem);
}

/* Stacked + sidebar cards */
.compos-featured-card--stacked,
.compos-featured-card--sidebar {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease;
}
.compos-featured-card--stacked:hover,
.compos-featured-card--sidebar:hover { border-color: var(--cp-accent); }

.compos-featured-card--stacked .featured-thumb,
.compos-featured-card--sidebar .featured-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
}
.compos-featured-card--stacked .featured-thumb img,
.compos-featured-card--sidebar .featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}
.compos-featured-card--stacked:hover .featured-thumb img,
.compos-featured-card--sidebar:hover .featured-thumb img { transform: scale(1.04); }

.compos-featured-card--stacked .featured-body,
.compos-featured-card--sidebar .featured-body {
    padding: var(--cp-space-md, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-xs, 0.25rem);
}

.compos-featured-card--stacked .featured-title,
.compos-featured-card--sidebar .featured-title {
    font-size: var(--cp-font-size-body, 1.125rem);
    font-weight: 700;
    color: var(--cp-text);
    margin: 0;
    line-height: 1.3;
}
.compos-featured-card--stacked .featured-title a,
.compos-featured-card--sidebar .featured-title a { color: inherit; text-decoration: none; }
.compos-featured-card--stacked .featured-title a:hover,
.compos-featured-card--sidebar .featured-title a:hover { color: var(--cp-accent); }

.compos-featured-card--sidebar { flex-direction: row; }
.compos-featured-card--sidebar .featured-thumb { width: 40%; flex-shrink: 0; aspect-ratio: auto; }
.compos-featured-card--sidebar .featured-thumb img { height: 100%; min-height: 100%; }

@media (max-width: 900px) {
    .compos-post-featured--two-column,
    .compos-post-featured--one-plus-two {
        grid-template-columns: 1fr;
    }
    .compos-featured-card--sidebar { flex-direction: column; }
    .compos-featured-card--sidebar .featured-thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* ============================================================
   CREATOR-6 — Compos Post List widget
   ============================================================ */
.compos-post-list-title {
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    font-size: var(--cp-font-size-h3);
    color: var(--cp-text);
}

.compos-post-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.compos-post-list-item {
    display: flex;
    gap: var(--cp-space-sm, 0.5rem);
    align-items: flex-start;
    padding: var(--cp-space-sm, 0.5rem) 0;
}

/* Divided style */
.compos-post-list--divided .compos-post-list-item {
    border-bottom: 1px solid var(--cp-border);
}
.compos-post-list--divided .compos-post-list-item:last-child { border-bottom: 0; }

/* Card style */
.compos-post-list--card .compos-post-list-item {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding: var(--cp-space-sm, 0.5rem);
    margin-bottom: var(--cp-space-xs, 0.25rem);
    transition: border-color 150ms ease;
}
.compos-post-list--card .compos-post-list-item:hover { border-color: var(--cp-accent); }

/* Minimal style */
.compos-post-list--minimal .compos-post-list-item {
    padding: var(--cp-space-xs, 0.25rem) 0;
    border: 0;
}

.post-list-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--cp-radius-sm);
    overflow: hidden;
    background: var(--cp-elevated);
    display: block;
}

.compos-post-list--thumb-medium .post-list-thumb { width: 80px; height: 80px; }

.post-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}

.compos-post-list-item:hover .post-list-thumb img { transform: scale(1.05); }

.post-list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-list-title {
    font-size: var(--cp-font-size-sm);
    font-weight: 600;
    color: var(--cp-text);
    line-height: 1.3;
    display: block;
    text-decoration: none;
    transition: color 150ms ease;
}
.post-list-title:hover { color: var(--cp-accent); }

.post-list-excerpt {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
    line-height: 1.5;
    display: block;
}

.post-list-meta {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
}

.compos-post-list-empty {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-sm);
    margin: 0;
    padding: var(--cp-space-sm, 0.5rem) 0;
}

/* ============================================================
   CREATOR-6 — Compos Author Bio widget
   ============================================================ */
.compos-author-bio .author-label {
    display: block;
    font-size: var(--cp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-text-muted);
    margin-bottom: var(--cp-space-sm, 0.5rem);
    font-weight: 600;
}

.compos-author-bio-inner {
    display: flex;
    gap: var(--cp-space-md, 1.5rem);
    align-items: flex-start;
}

.compos-author-bio--vertical { text-align: center; }
.compos-author-bio--vertical .compos-author-bio-inner {
    flex-direction: column;
    align-items: center;
}

.compos-author-bio--card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-md, 1.5rem);
}

.compos-author-bio .author-avatar img {
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
}

.compos-author-bio .author-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compos-author-bio .author-name {
    font-weight: 700;
    font-size: var(--cp-font-size-body, 1rem);
    color: var(--cp-text);
}

.compos-author-bio .author-post-count {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compos-author-bio .author-bio {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-sm);
    line-height: 1.6;
    margin: var(--cp-space-xs, 0.25rem) 0 0 0;
}

.compos-author-bio .author-social {
    display: flex;
    gap: var(--cp-space-xs, 0.25rem);
    margin-top: var(--cp-space-sm, 0.5rem);
}

.compos-author-bio--vertical .author-social { justify-content: center; }

.compos-author-bio .author-social a {
    color: var(--cp-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    transition: color 150ms ease;
    text-decoration: none;
}

.compos-author-bio .author-social a:hover,
.compos-author-bio .author-social a:focus-visible {
    color: var(--cp-accent);
    outline: none;
}

/* ============================================================
   CREATOR-6 — Compos Related Posts widget
   ============================================================ */
.compos-related-posts {
    margin-top: var(--cp-space-xl, 4rem);
}

.compos-related-posts .section-title {
    font-size: var(--cp-font-size-h3);
    color: var(--cp-text);
    margin: 0 0 var(--cp-space-md, 1.5rem) 0;
}

.compos-related-grid {
    display: grid;
    grid-template-columns: repeat(var(--related-cols, 3), 1fr);
    gap: var(--cp-space-md, 1.5rem);
}

.compos-related-grid--cols-2 { --related-cols: 2; }
.compos-related-grid--cols-3 { --related-cols: 3; }
.compos-related-grid--cols-4 { --related-cols: 4; }

@media (max-width: 768px) { .compos-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .compos-related-grid { grid-template-columns: 1fr; } }

.compos-related-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, transform 200ms ease;
}

.compos-related-card:hover {
    border-color: var(--cp-accent);
    transform: translateY(-2px);
}

.compos-related-card .related-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
}

.compos-related-card .related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}
.compos-related-card:hover .related-thumb img { transform: scale(1.04); }

.compos-related-card .related-body {
    padding: var(--cp-space-sm, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compos-related-card .related-title {
    font-weight: 600;
    font-size: var(--cp-font-size-sm);
    color: var(--cp-text);
    text-decoration: none;
    line-height: 1.3;
    display: block;
    transition: color 150ms ease;
}
.compos-related-card .related-title:hover { color: var(--cp-accent); }

.compos-related-card .related-excerpt {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
    line-height: 1.5;
    margin: 0;
}

.compos-related-card .related-date {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
}

/* ============================================================
   CREATOR-7 — Shared slider / carousel primitive
   Used by image / content / testimonial / card carousel widgets.
   JS lives in assets/js/compos-slider.js.
   ============================================================ */
.compos-slider-track-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.compos-slider-track {
    display: flex;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.compos-slider-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}

.compos-slider--2up .compos-slider-slide { flex: 0 0 50%; }
.compos-slider--3up .compos-slider-slide { flex: 0 0 33.333%; }
.compos-slider--4up .compos-slider-slide { flex: 0 0 25%; }

@media (max-width: 1024px) {
    .compos-slider--3up .compos-slider-slide,
    .compos-slider--4up .compos-slider-slide { flex: 0 0 50%; }
}
@media (max-width: 767px) {
    .compos-slider--2up .compos-slider-slide,
    .compos-slider--3up .compos-slider-slide,
    .compos-slider--4up .compos-slider-slide { flex: 0 0 100%; }
}

/* Fade transition — slides stack and cross-fade */
.compos-slider--fade .compos-slider-track { position: relative; }
.compos-slider--fade .compos-slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 600ms ease;
    flex: 0 0 100%;
    pointer-events: none;
}
.compos-slider--fade .compos-slider-slide.is-active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* Controls */
.compos-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-space-sm, 0.5rem);
    margin-top: var(--cp-space-md, 1.5rem);
}

.compos-slider-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    color: var(--cp-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1;
    box-sizing: border-box;
}

.compos-slider-btn i { line-height: 1; }

.compos-slider-btn:hover,
.compos-slider-btn:focus-visible {
    background: var(--cp-accent);
    border-color: var(--cp-accent);
    color: #fff; /* #fff intentional — icon on accent button */
    outline: none;
}

.compos-slider-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.compos-slider-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 0; /* browser reset — override button default min-height */
    max-height: 8px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--cp-border);
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
    border: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.compos-slider-dot.is-active {
    background: var(--cp-accent);
    transform: scale(1.3);
}

.compos-slider-dot:hover,
.compos-slider-dot:focus-visible {
    background: var(--cp-accent);
    outline: none;
}

/* Autoplay progress bar */
.compos-slider-progress {
    height: 2px;
    background: var(--cp-border);
    border-radius: 99px;
    overflow: hidden;
    margin-top: var(--cp-space-xs, 0.25rem);
}

.compos-slider-progress-bar {
    height: 100%;
    background: var(--cp-accent);
    width: 0%;
}

/* ============================================================
   CREATOR-7 — Compos Image Slider
   --slide-overlay opacity set inline (numeric, not a colour).
   ============================================================ */
.compos-image-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--cp-text-on-dark);
}

.compos-image-slider--full-screen   .compos-image-slide { height: 100vh; }
.compos-image-slider--three-quarter .compos-image-slide { height: 75vh; }
.compos-image-slider--half          .compos-image-slide { height: 50vh; }
.compos-image-slider--auto          .compos-image-slide { min-height: 400px; }

.compos-image-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.compos-image-slide-overlay {
    position: absolute;
    inset: 0;
    background: var(--cp-dark, #0e1628); /* #0e1628 fallback — image-slider dark overlay */
    opacity: var(--slide-overlay, 0.5);
    z-index: 1;
    pointer-events: none;
}

.compos-image-slider--overlay-accent .compos-image-slide-overlay { background: var(--cp-accent); }

.compos-image-slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--cp-space-xl, 4rem) var(--cp-space-md, 1.5rem);
    max-width: 800px;
    width: 100%;
}

.compos-image-slide-headline {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--cp-text-on-dark);
    line-height: 1.1;
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    letter-spacing: -0.02em;
}

.compos-image-slide-subheadline {
    color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.85);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    margin: 0 0 var(--cp-space-md, 1.5rem) 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   CREATOR-7 — Compos Content Slider
   ============================================================ */
.compos-content-slide {
    padding: var(--cp-space-xs, 0.25rem);
    height: 100%;
}

.compos-content-slide-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-sm, 0.5rem);
}

.compos-content-slide--boxed .compos-content-slide-inner {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: var(--cp-space-md, 1.5rem);
}

.compos-content-slide--accent-border .compos-content-slide-inner {
    border-left: 3px solid var(--cp-accent);
    padding-left: var(--cp-space-md, 1.5rem);
}

.compos-content-slide .slide-icon {
    font-size: 2.5rem;
    color: var(--cp-accent);
    margin-bottom: var(--cp-space-xs, 0.25rem);
    line-height: 1;
}

.compos-content-slide .slide-eyebrow {
    font-size: var(--cp-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-accent);
}

.compos-content-slide h3 {
    font-size: var(--cp-font-size-h3);
    font-weight: 700;
    color: var(--cp-text);
    margin: 0;
    line-height: 1.3;
}

.compos-content-slide p {
    color: var(--cp-text-muted);
    line-height: 1.6;
    flex: 1;
    margin: 0;
}

.compos-content-slide .compos-btn { align-self: flex-start; }

/* Centre-active scaling */
.compos-slider--centre-active .compos-slider-slide {
    transition: transform 300ms ease, opacity 300ms ease;
    transform: scale(0.95);
    opacity: 0.7;
}

.compos-slider--centre-active .compos-slider-slide:hover,
.compos-slider--centre-active .compos-slider-slide.is-hovered {
    transform: scale(1);
    opacity: 1;
}

/* ============================================================
   CREATOR-7 — Compos Testimonial Carousel
   ============================================================ */
.compos-testimonial-carousel {
    padding: var(--cp-space-lg, 3rem) var(--cp-space-md, 1.5rem);
}

.compos-testimonial-carousel--bg-surface { background: var(--cp-surface); border-radius: var(--cp-radius-md); }
.compos-testimonial-carousel--bg-dark    { background: var(--cp-elevated); border-radius: var(--cp-radius-md); }

.compos-testimonial-slide {
    padding: var(--cp-space-md, 1.5rem);
}

.compos-testimonial-carousel--centred .compos-testimonial-slide {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.compos-testimonial-quote {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--cp-text);
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 var(--cp-space-md, 1.5rem) 0;
    position: relative;
}

.compos-testimonial-carousel--left-quote .compos-testimonial-quote {
    padding-left: 60px;
}

.compos-testimonial-quote::before {
    content: "\201C";
    font-size: 6rem;
    color: var(--cp-accent);
    opacity: 0.3;
    position: absolute;
    top: -2rem;
    left: -1rem;
    line-height: 1;
    font-style: normal;
    font-family: Georgia, 'Times New Roman', serif;
}

.compos-testimonial-carousel--left-quote .compos-testimonial-quote::before {
    left: 0;
    top: -1.5rem;
}

.testimonial-author-row {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm, 0.5rem);
    justify-content: flex-start;
}

.compos-testimonial-carousel--centred .testimonial-author-row { justify-content: center; }

.testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cp-accent);
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 700;
    color: var(--cp-text);
    display: block;
    line-height: 1.3;
}

.testimonial-role {
    font-size: var(--cp-font-size-sm);
    color: var(--cp-text-muted);
    display: block;
}

.testimonial-stars {
    color: var(--cp-accent);
    letter-spacing: 2px;
    margin-bottom: var(--cp-space-sm, 0.5rem);
    font-size: 1rem;
    line-height: 1;
}

/* With-photo-large layout */
.compos-testimonial-carousel--with-photo-large .testimonial-split {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--cp-space-md, 1.5rem);
    align-items: center;
}

.testimonial-photo-large {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cp-accent);
}

@media (max-width: 600px) {
    .compos-testimonial-carousel--with-photo-large .testimonial-split {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .testimonial-photo-large { margin: 0 auto; }
}

/* ============================================================
   CREATOR-7 — Compos Card Carousel
   ============================================================ */
.compos-card-carousel--equal .compos-slider-track { align-items: stretch; }

.compos-card-carousel-slide {
    padding: var(--cp-space-xs, 0.25rem);
    height: 100%;
}

.compos-card-carousel-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, transform 200ms ease;
}

.compos-card-carousel-card:hover {
    border-color: var(--cp-accent);
    transform: translateY(-2px);
}

.card-carousel-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
    display: block;
}

.compos-card-carousel-card:hover .card-carousel-image img { transform: scale(1.04); }

.card-carousel-body {
    padding: var(--cp-space-md, 1.5rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-xs, 0.25rem);
}

.card-carousel-tag {
    display: inline-block;
    font-size: var(--cp-font-size-xs);
    color: var(--cp-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-carousel-title {
    font-weight: 700;
    color: var(--cp-text);
    font-size: var(--cp-font-size-body, 1.125rem);
    margin: 0;
    line-height: 1.3;
}

.card-carousel-body-text {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-sm);
    line-height: 1.6;
    flex: 1;
    margin: 0;
}

.card-carousel-link {
    color: var(--cp-accent);
    font-size: var(--cp-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    display: inline-block;
    transition: text-decoration-color 150ms ease;
}
.card-carousel-link:hover { text-decoration: underline; }

/* Overlay style — text over image with dark gradient */
.compos-card-carousel--overlay .compos-card-carousel-card { border: 0; }

.card-carousel-overlay-wrap {
    position: relative;
    min-height: 280px;
    height: 100%;
    display: flex;
}

.compos-card-carousel--overlay .card-carousel-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
}

.card-carousel-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(var(--cp-dark-rgb, 14,22,40), 0.92));
    /* rgba(dark-rgb) token with fallback — not a hardcoded colour */
    pointer-events: none;
    z-index: 1;
}

.card-carousel-overlay-content {
    position: relative;
    z-index: 2;
    padding: var(--cp-space-md, 1.5rem);
    margin-top: auto;
    color: var(--cp-text-on-dark);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-xs, 0.25rem);
}

.card-carousel-overlay-content .card-carousel-title { color: var(--cp-text-on-dark); }
.card-carousel-overlay-content .card-carousel-body-text { color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.85); }
.card-carousel-overlay-content .card-carousel-link { color: var(--cp-text-on-dark); }
.card-carousel-overlay-content .card-carousel-link:hover { color: var(--cp-accent); }

/* ============================================================
   CREATOR-8 — Compos Image Block
   ============================================================ */
/* -- Image Block (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-8 — Compos Masonry Gallery (CSS columns)
   ============================================================ */
.compos-masonry {
    columns: var(--masonry-cols, 3);
    column-gap: var(--cp-space-sm, 0.5rem);
}

.compos-masonry--gap-none { column-gap: 0; }
.compos-masonry--gap-sm   { column-gap: 4px; }
.compos-masonry--gap-md   { column-gap: var(--cp-space-sm, 0.5rem); }
.compos-masonry--gap-lg   { column-gap: var(--cp-space-md, 1.5rem); }

@media (max-width: 768px) { .compos-masonry { columns: 2; } }
@media (max-width: 480px) { .compos-masonry { columns: 1; } }

.compos-masonry-item {
    break-inside: avoid;
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-surface);
}

.compos-masonry--gap-none .compos-masonry-item { margin-bottom: 0; }
.compos-masonry--gap-sm   .compos-masonry-item { margin-bottom: 4px; }
.compos-masonry--gap-md   .compos-masonry-item { margin-bottom: var(--cp-space-sm, 0.5rem); }
.compos-masonry--gap-lg   .compos-masonry-item { margin-bottom: var(--cp-space-md, 1.5rem); }

.compos-masonry-item img {
    width: 100%;
    display: block;
    transition: transform 300ms ease, filter 300ms ease;
}

.compos-masonry-item a { display: block; }

/* Hover effects */
.compos-masonry--hover-zoom .compos-masonry-item:hover img { transform: scale(1.05); }
.compos-masonry--hover-dim  .compos-masonry-item:hover img { filter: brightness(0.75); }

.compos-masonry--hover-overlay .compos-masonry-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.3);
    /* rgba(accent-rgb) token with fallback — not a hardcoded colour */
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.compos-masonry--hover-overlay .compos-masonry-item:hover::after { opacity: 1; }

.compos-masonry-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: rgba(var(--cp-dark-rgb, 14,22,40), 0.75);
    color: var(--cp-text-on-dark);
    padding: var(--cp-space-xs, 0.25rem) var(--cp-space-sm, 0.5rem);
    font-size: var(--cp-font-size-xs);
    transform: translateY(100%);
    transition: transform 300ms ease;
    z-index: 1;
    /* rgba(dark-rgb) token with fallback — not a hardcoded colour */
}
.compos-masonry-item:hover figcaption { transform: translateY(0); }

.compos-masonry-empty {
    padding: var(--cp-space-lg, 3rem);
    text-align: center;
    color: var(--cp-text-muted);
    background: var(--cp-surface);
    border: 2px dashed var(--cp-border);
    border-radius: var(--cp-radius-md);
}

/* ============================================================
   CREATOR-8 — Compos Hotspot Image
   Marker positions set inline as percentages (layout, not colour).
   ============================================================ */
/* -- Hotspot Image (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-8 — Compos Flip Cards
   --flip-cols layout integer, --flip-height px value (both inline).
   ============================================================ */
/* -- Flip Cards (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-8 — Compos Number Counter
   ============================================================ */
/* -- Number Counter (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-9 — Compos Opening Hours
   ============================================================ */
.compos-hours-title {
    margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
    font-size: var(--cp-font-size-h5, 1.125rem);
    font-weight: 600;
    color: var(--cp-text);
}

.compos-hours-status {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-xs, 0.25rem);
    font-size: var(--cp-font-size-sm);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    margin-bottom: var(--cp-space-sm, 0.5rem);
}

.compos-hours-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.compos-hours-status--open {
    background: rgba(var(--cp-status-success-rgb, 16,185,129), 0.12);
    color: var(--cp-status-success);
    /* rgba(status-success-rgb) token with fallback — semantic status colour */
}

.compos-hours-status--closed {
    background: rgba(var(--cp-status-error-rgb, 239,68,68), 0.12);
    color: var(--cp-status-error);
    /* rgba(status-error-rgb) token with fallback */
}

.compos-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cp-font-size-sm);
}

.compos-hours-table tr { border-bottom: 1px solid var(--cp-border); }
.compos-hours-table tr:last-child { border-bottom: 0; }

.compos-hours-table td {
    padding: var(--cp-space-xs, 0.25rem) var(--cp-space-sm, 0.5rem);
    color: var(--cp-text-muted);
    vertical-align: top;
}

.compos-hours-table td:first-child {
    font-weight: 600;
    color: var(--cp-text);
    width: 40%;
}

.compos-hours-table tr.is-today td {
    color: var(--cp-text);
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.06);
    /* rgba(accent-rgb) fallback — today-row highlight */
}

.compos-hours-table tr.is-today td:first-child {
    color: var(--cp-accent);
    font-weight: 700;
}

.compos-hours-closed {
    color: var(--cp-text-muted);
    font-style: italic;
}

.compos-hours-note {
    font-size: var(--cp-font-size-xs);
    color: var(--cp-text-muted);
    display: block;
    margin-top: 2px;
}

.compos-hours-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-xs, 0.25rem);
}

.compos-hours-list-row {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--cp-space-sm, 0.5rem);
    padding: var(--cp-space-xs, 0.25rem) 0;
    border-bottom: 1px solid var(--cp-border);
}
.compos-hours-list-row:last-child { border-bottom: 0; }
.compos-hours-list-row dt { font-weight: 600; color: var(--cp-text); margin: 0; }
.compos-hours-list-row dd { margin: 0; color: var(--cp-text-muted); font-size: var(--cp-font-size-sm); }
.compos-hours-list-row.is-today dt { color: var(--cp-accent); }
.compos-hours-list-row.is-today dd { color: var(--cp-text); }

.compos-hours-compact {
    font-size: var(--cp-font-size-sm);
    color: var(--cp-text);
    font-weight: 600;
}

/* -- Social Links (v3 — most rules now scoped in widget PHP) -- */
/* -- Social Links (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-9 — Compos Share Bar
   ============================================================ */
.compos-share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cp-space-xs, 0.25rem);
}

.compos-share-bar--centre { justify-content: center; }
.compos-share-bar--right  { justify-content: flex-end; }

.compos-share-bar-title {
    font-size: var(--cp-font-size-sm);
    font-weight: 600;
    color: var(--cp-text-muted);
    margin-right: var(--cp-space-xs, 0.25rem);
}

.compos-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--cp-radius-sm);
    font-size: var(--cp-font-size-sm);
    font-weight: 500;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    border: 1px solid var(--cp-border);
    color: var(--cp-text-muted);
    background: var(--cp-surface);
    line-height: 1;
}

.compos-share-btn:hover,
.compos-share-btn:focus-visible {
    border-color: var(--cp-accent);
    color: var(--cp-accent);
    outline: none;
}

.compos-share-btn i { font-size: 1rem; }

/* Icon-only: square/circle dimensional buttons */
.compos-share-bar--icon-only .compos-share-btn {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
}

.compos-share-bar--icon-circle .compos-share-btn { border-radius: 50%; width: 40px; height: 40px; padding: 0; justify-content: center; }
.compos-share-bar--icon-square .compos-share-btn { border-radius: var(--cp-radius-sm); }

.compos-share-bar--size-sm .compos-share-btn { padding: 4px 10px; font-size: var(--cp-font-size-xs); }
.compos-share-bar--size-lg .compos-share-btn { padding: 8px 16px; font-size: var(--cp-font-size-body, 1rem); }

.compos-share-bar--size-sm.compos-share-bar--icon-circle .compos-share-btn { width: 32px; height: 32px; }
.compos-share-bar--size-lg.compos-share-bar--icon-circle .compos-share-btn { width: 48px; height: 48px; }

.compos-share-btn--copy-link.is-copied {
    color: var(--cp-status-success);
    border-color: var(--cp-status-success);
}

/* ============================================================
   CREATOR-9 — Compos Notification Bar
   ============================================================ */
.compos-notif-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-space-sm, 0.5rem);
    padding: var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
    text-align: center;
    flex-wrap: wrap;
    position: relative;
    transition: max-height 300ms ease, padding 300ms ease, opacity 300ms ease;
    max-height: 200px;
    overflow: hidden;
    line-height: 1.4;
}

.compos-notif-bar.is-dismissed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    border: 0;
}

.compos-notif-bar--accent  { background: var(--cp-accent); }
.compos-notif-bar--dark    { background: var(--cp-elevated); }
.compos-notif-bar--surface { background: var(--cp-surface); border-bottom: 1px solid var(--cp-border); }

.compos-notif-bar--text-light { color: var(--cp-text-on-dark); }
.compos-notif-bar--text-dark  { color: var(--cp-text); }

.compos-notif-bar--sticky-top {
    position: sticky;
    top: 0;
    z-index: 9998;
}

.compos-notif-inner {
    display: flex;
    align-items: center;
    gap: var(--cp-space-sm, 0.5rem);
    flex-wrap: wrap;
    justify-content: center;
}

.compos-notif-message {
    font-size: var(--cp-font-size-sm);
    font-weight: 500;
}

.compos-notif-message a {
    color: inherit;
    text-decoration: underline;
}

.compos-notif-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.compos-notif-dismiss {
    position: absolute;
    right: var(--cp-space-sm, 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    font-size: 1.2rem;
    padding: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 150ms ease;
}

.compos-notif-dismiss:hover,
.compos-notif-dismiss:focus-visible {
    opacity: 1;
    outline: none;
}

/* ============================================================
   CREATOR-9 — Compos Star Rating
   ============================================================ */
/* -- Star Rating (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* -- Search Bar (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-10 — Compos Step Process
   ============================================================ */
/* -- Step Process (v3 — scoped CSS in widget PHP; stale global rules removed) -- */

/* ============================================================
   CREATOR-10 — Compos Comparison Table
   ============================================================ */
.compos-comparison-title {
    margin: 0 0 var(--cp-space-md, 1.5rem) 0;
    font-size: var(--cp-font-size-h3);
    color: var(--cp-text);
    text-align: center;
}

.compos-comparison-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--cp-radius-md);
    border: 1px solid var(--cp-border);
    max-width: 100%;
}

.compos-comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.compos-comparison-table th {
    padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
    text-align: center;
    font-weight: 700;
    color: var(--cp-text);
    border-bottom: 2px solid var(--cp-border);
    background: var(--cp-surface);
    vertical-align: middle;
}

.compos-comparison--sticky .compos-comparison-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.compos-comparison-table th:first-child {
    text-align: left;
    min-width: 180px;
}

.compos-comparison-table th.is-featured {
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.08);
    color: var(--cp-accent);
    /* rgba(accent-rgb) fallback — featured column header */
}

.compos-comparison-table .comparison-badge {
    display: inline-block;
    font-size: var(--cp-font-size-xs);
    background: var(--cp-accent);
    color: #fff; /* #fff intentional — text on accent badge */
    padding: 2px 8px;
    border-radius: 99px;
    margin-bottom: 4px;
    font-weight: 600;
}

.compos-comparison-table td {
    padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
    text-align: center;
    border-bottom: 1px solid var(--cp-border);
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-sm);
    vertical-align: middle;
}

.compos-comparison-table tbody tr:last-child td { border-bottom: 0; }

.compos-comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--cp-text);
}

.compos-comparison-table td.is-featured {
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.04);
    /* rgba(accent-rgb) fallback — featured column body */
}

.compos-comparison-table tbody tr:hover td {
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.03);
    /* rgba(accent-rgb) fallback — row hover */
}

.compos-comparison-yes i {
    color: var(--cp-status-success);
    font-size: 1.1rem;
    line-height: 1;
}

.compos-comparison-no i {
    color: var(--cp-text-muted);
    opacity: 0.4;
    font-size: 1.1rem;
    line-height: 1;
}

.compos-comparison-table .comparison-cta-row td {
    padding: var(--cp-space-md, 1.5rem);
    border-bottom: 0;
    background: transparent;
}

.compos-comparison-table .comparison-cta-row td.is-featured {
    background: rgba(var(--cp-accent-rgb, 255,101,14), 0.04);
}

.compos-comparison-table .compos-btn {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   CREATOR-10 — Compos Sticky Bar
   --sticky-z set inline from PHP (number, not colour).
   ============================================================ */
.compos-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--sticky-z, 9990);
    padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}

.compos-sticky-bar--top    { top: 0; transform: translateY(-100%); }
.compos-sticky-bar--bottom { bottom: 0; transform: translateY(100%); }

.compos-sticky-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.compos-sticky-bar.is-dismissed {
    opacity: 0;
    pointer-events: none;
}

.compos-sticky-bar--accent  { background: var(--cp-accent); color: var(--cp-text-on-dark); }
.compos-sticky-bar--dark    { background: var(--cp-elevated); color: var(--cp-text-on-dark); }
.compos-sticky-bar--surface { background: var(--cp-surface); color: var(--cp-text); }
.compos-sticky-bar--surface.compos-sticky-bar--top    { border-bottom: 1px solid var(--cp-border); }
.compos-sticky-bar--surface.compos-sticky-bar--bottom { border-top: 1px solid var(--cp-border); }

.compos-sticky-bar--blur {
    background: rgba(var(--cp-dark-rgb, 14,22,40), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--cp-text-on-dark);
    /* rgba(dark-rgb) fallback — frosted sticky bar */
}

.compos-sticky-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-md, 1.5rem);
    flex-wrap: wrap;
}

.compos-sticky-bar--width-full .compos-sticky-bar-inner { max-width: none; }

.compos-sticky-bar .sticky-message {
    font-weight: 500;
    flex: 1;
    font-size: var(--cp-font-size-sm);
}

.compos-sticky-bar .sticky-message a {
    color: inherit;
    text-decoration: underline;
}

.compos-sticky-dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    font-size: 1.25rem;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 150ms ease;
}

.compos-sticky-dismiss:hover,
.compos-sticky-dismiss:focus-visible {
    opacity: 1;
    outline: none;
}

/* ============================================================
   CREATOR-10 — Compos Back to Top
   --btt-bottom + --btt-side set inline from PHP (px values).
   ============================================================ */
.compos-widget.compos-back-top,
.compos-widget.compos-sticky-bar { padding: 0 !important; margin: 0 !important; height: 0; min-height: 0; overflow: visible !important; }
.compos-widget.compos-back-top .compos-widget-content,
.compos-widget.compos-back-top .compos-widget-inner,
.compos-widget.compos-back-top .compos-widget-body,
.compos-widget.compos-sticky-bar .compos-widget-content,
.compos-widget.compos-sticky-bar .compos-widget-inner,
.compos-widget.compos-sticky-bar .compos-widget-body { overflow: visible !important; padding: 0 !important; margin: 0 !important; height: 0; min-height: 0; }
.compos-widget.compos-search-bar .compos-widget-content,
.compos-widget.compos-search-bar .compos-widget-inner,
.compos-widget.compos-search-bar .compos-widget-body { overflow: visible !important; } /* live results dropdown must escape overflow:hidden */
.compos-back-top {
    position: fixed;
    bottom: var(--btt-bottom, 24px);
    z-index: 9985;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: 0;
    transition: opacity 300ms ease, transform 300ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    box-shadow: var(--cp-shadow-md);
    opacity: 0;
    pointer-events: none;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
/* Elementor editor: render inline so it's visible where placed */
.elementor-editor-active .compos-back-top { position: static; opacity: 1; pointer-events: auto; margin: 10px auto; display: flex; }
.elementor-editor-active .compos-widget.compos-back-top,
.elementor-editor-active .compos-widget.compos-back-top .compos-widget-content,
.elementor-editor-active .compos-widget.compos-back-top .compos-widget-inner,
.elementor-editor-active .compos-widget.compos-back-top .compos-widget-body { height: auto; min-height: auto; padding: 10px !important; }

.compos-back-top--bottom-right  { right: var(--btt-side, 24px); }
.compos-back-top--bottom-left   { left:  var(--btt-side, 24px); }
.compos-back-top--bottom-centre { left: 50%; transform: translateX(-50%); }

.compos-back-top.is-visible { opacity: 1; pointer-events: auto; }
.compos-back-top--bottom-centre.is-visible { transform: translateX(-50%); }

.compos-back-top--circle { border-radius: 50%; }
.compos-back-top--square { border-radius: var(--cp-radius-sm); }
.compos-back-top--pill   { border-radius: 99px; padding: 0 var(--cp-space-sm, 0.5rem); }

.compos-back-top--sm { width: 36px; height: 36px; font-size: 1rem; }
.compos-back-top--md { width: 48px; height: 48px; font-size: 1.25rem; }
.compos-back-top--lg { width: 56px; height: 56px; font-size: 1.5rem; }

.compos-back-top--pill.compos-back-top--sm { width: auto; height: 36px; padding: 0 var(--cp-space-sm, 0.5rem); }
.compos-back-top--pill.compos-back-top--md { width: auto; height: 48px; padding: 0 var(--cp-space-md, 1.5rem); }
.compos-back-top--pill.compos-back-top--lg { width: auto; height: 56px; padding: 0 var(--cp-space-md, 1.5rem); font-size: 1.25rem; }

.compos-back-top i { line-height: 1; }

.compos-back-top--accent {
    background: var(--cp-accent);
    color: #fff; /* #fff intentional — icon on accent button */
}
.compos-back-top--accent:hover,
.compos-back-top--accent:focus-visible { opacity: 0.9; outline: none; }

.compos-back-top--dark {
    background: var(--cp-elevated);
    color: var(--cp-text);
}
.compos-back-top--dark:hover,
.compos-back-top--dark:focus-visible {
    background: var(--cp-accent);
    color: #fff; /* #fff intentional — icon on accent hover */
    outline: none;
}

.compos-back-top--surface {
    background: var(--cp-surface);
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
}
.compos-back-top--surface:hover,
.compos-back-top--surface:focus-visible {
    border-color: var(--cp-accent);
    color: var(--cp-accent);
    outline: none;
}

.btt-label {
    font-size: var(--cp-font-size-xs);
    font-weight: 600;
}

/* ━━━ WOOCOMMERCE WIDGETS ━━━ */
/* -- Product Grid (v3 — scoped CSS in widget PHP; stale global rules removed) -- */
/* -- Cart Mini (v3 — scoped CSS in widget PHP) -- */
.compos-cart-item { display: flex; gap: var(--cp-space-sm); align-items: flex-start; padding: var(--cp-space-xs) 0; border-bottom: 1px solid var(--cp-border); }
.compos-cart-item:last-child { border-bottom: none; }
.compos-cart-item-thumb { width: 48px; height: 48px; border-radius: var(--cp-radius-sm); overflow: hidden; flex-shrink: 0; }
.compos-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.compos-cart-total { display: flex; justify-content: space-between; align-items: center; padding: var(--cp-space-sm) 0; font-weight: 700; color: var(--cp-text); border-top: 2px solid var(--cp-border); margin-top: var(--cp-space-xs); }
.compos-cart-actions { display: flex; flex-direction: column; gap: var(--cp-space-xs); margin-top: var(--cp-space-sm); }
/* -- Category Grid (v3 — scoped CSS in widget PHP; stale global rules removed) -- */
/* -- Sale Banner (v3 — scoped CSS in widget PHP; stale global rules removed) -- */
/* category-grid responsive rules moved to scoped widget CSS */

/* ━━━ ACCORDION WIDGET ━━━ */
.compos-accordion { display: flex; flex-direction: column; }
.compos-accordion--bordered .compos-accordion-item { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); margin-bottom: 4px; }
.compos-accordion--card .compos-accordion-item { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); margin-bottom: var(--cp-space-xs); }
.compos-accordion--minimal .compos-accordion-item { border-bottom: 1px solid var(--cp-border); }
.compos-accordion-trigger { width: 100%; display: flex; align-items: center; gap: var(--cp-space-sm); padding: var(--cp-space-sm) var(--cp-space-md); background: transparent; border: none; cursor: pointer; text-align: left; color: var(--cp-text); font-size: var(--cp-font-size-body); font-weight: 600; }
.compos-accordion-trigger:hover { color: var(--cp-accent); }
.compos-accordion-title { flex: 1; }
.compos-accordion-icon-lead { color: var(--cp-accent); }
.compos-accordion-icon-toggle { color: var(--cp-text-muted); transition: transform var(--acc-speed, 300ms) ease; }
.compos-accordion-item.is-open .compos-accordion-icon-toggle { transform: rotate(180deg); color: var(--cp-accent); }
.compos-accordion-answer { max-height: 0; overflow: hidden; transition: max-height var(--acc-speed, 300ms) ease; }
.compos-accordion-item.is-open .compos-accordion-answer { max-height: 1000px; } /* generous max for animation — actual height varies */
.compos-accordion-answer-inner { padding: 0 var(--cp-space-md) var(--cp-space-md); color: var(--cp-text-muted); font-size: var(--cp-font-size-body); line-height: 1.6; }

/* ━━━ EMBED WIDGET (v3 — scoped CSS in widget PHP; stale global rules removed) ━━━ */

/* ━━━ DATA TABLE WIDGET ━━━ */
.compos-data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.compos-data-table { width: 100%; border-collapse: collapse; font-size: var(--cp-font-size-small); text-align: left; }
.compos-data-table-caption { text-align: left; padding: var(--cp-space-xs) 0; color: var(--cp-text-muted); font-size: var(--cp-font-size-small); caption-side: top; }
.compos-data-table th { padding: 10px 16px; font-weight: 700; color: var(--cp-text); background: var(--cp-surface); border-bottom: 2px solid var(--cp-border); white-space: nowrap; cursor: default; }
.compos-data-table th.is-sortable { cursor: pointer; }
.compos-data-table th.is-sortable:hover { color: var(--cp-accent); }
.compos-data-table td { padding: 10px 16px; color: var(--cp-text-muted); border-bottom: 1px solid var(--cp-border); vertical-align: middle; }
.compos-data-table .align-left { text-align: left; }
.compos-data-table .align-centre { text-align: center; }
.compos-data-table .align-right { text-align: right; }
.compos-data-table-sort-icon { margin-left: 4px; font-size: 0.9em; opacity: 0.7; }
.compos-data-table--striped tbody tr:nth-child(even) td { background: rgba(var(--cp-accent-rgb,255,101,14),0.03); }
.compos-data-table--hover tbody tr:hover td { background: rgba(var(--cp-accent-rgb,255,101,14),0.05); }
.compos-data-table--bordered td, .compos-data-table--bordered th { border: 1px solid var(--cp-border); }

/* ━━━ SITEMAP WIDGET ━━━ */
.compos-sitemap-title { font-size: var(--cp-font-size-h3); color: var(--cp-text); margin: 0 0 var(--cp-space-md); }
.compos-sitemap-grid { display: grid; gap: var(--cp-space-lg); }
.compos-sitemap--cols-1 .compos-sitemap-grid { grid-template-columns: 1fr; }
.compos-sitemap--cols-2 .compos-sitemap-grid { grid-template-columns: repeat(2, 1fr); }
.compos-sitemap--cols-3 .compos-sitemap-grid { grid-template-columns: repeat(3, 1fr); }
.compos-sitemap-group h3 { font-size: var(--cp-font-size-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cp-text-muted); margin-bottom: var(--cp-space-sm); padding-bottom: var(--cp-space-xs); border-bottom: 1px solid var(--cp-border); }
.compos-sitemap-group ul { list-style: none; padding: 0; margin: 0; }
.compos-sitemap-group li { padding: 3px 0; }
.compos-sitemap-group a { color: var(--cp-text); text-decoration: none; font-size: var(--cp-font-size-small); }
.compos-sitemap-group a:hover { color: var(--cp-accent); }
.compos-sitemap-group ul ul { padding-left: var(--cp-space-sm); border-left: 2px solid var(--cp-border); margin-left: var(--cp-space-xs); margin-top: 4px; }
.compos-sitemap-date { color: var(--cp-text-muted); font-size: var(--cp-font-size-xs); margin-left: 6px; }
@media (max-width: 640px) { .compos-sitemap--cols-2 .compos-sitemap-grid, .compos-sitemap--cols-3 .compos-sitemap-grid { grid-template-columns: 1fr; } }

/* ━━━ BREADCRUMB WIDGET ━━━ */
.compos-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.compos-breadcrumb li { display: flex; align-items: center; gap: 4px; font-size: var(--cp-font-size-xs); color: var(--cp-text-muted); }
.compos-breadcrumb li a { color: var(--cp-text-muted); text-decoration: none; }
.compos-breadcrumb li a:hover { color: var(--cp-accent); }
.compos-breadcrumb li[aria-current="page"] span, .compos-breadcrumb li:last-child span { color: var(--cp-text); font-weight: 500; }
.compos-breadcrumb li:not(:last-child)::after { content: '/'; color: var(--cp-text-muted); opacity: 0.5; margin-left: 4px; }
.compos-breadcrumb--sep-chevron li:not(:last-child)::after { content: '›'; }
.compos-breadcrumb--sep-arrow li:not(:last-child)::after { content: '→'; }
.compos-breadcrumb--sep-dot li:not(:last-child)::after { content: '·'; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* WIDGET-CSS-AUDIT-1 — FOUNDATION QUALITY BASE                          */
/* Shared utilities & card primitives every CREATOR widget can lean on.  */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Card base — all Compos widget cards inherit this richness */
.compos-card,
.compos-post-card,
.compos-kpi-card,
.compos-service-card,
.compos-pricing-card,
.compos-team-member,
.compos-testimonial-card,
.compos-flip-front,
.compos-flip-back,
.compos-content-slide-inner,
.compos-countdown-unit,
.compos-related-card,
.compos-comparison-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md, 12px);
}

/* Rich elevated variant — depth like prize draw cards */
.compos-card--elevated,
.compos-post-card:hover,
.compos-service-card:hover,
.compos-pricing-card:hover,
.compos-team-member:hover {
    background: var(--cp-elevated, var(--cp-surface));
    border-color: var(--cp-accent);
    box-shadow: var(--cp-shadow-md);
    transform: translateY(-2px);
    transition: all 200ms ease-out;
}

/* Accent border-top — prize draw card signature */
.compos-card--accent-top { border-top: 3px solid var(--cp-accent); }

/* Widget section heading */
.compos-widget-title {
    font-size: var(--cp-font-size-h2);
    font-weight: 800;
    color: var(--cp-text);
    margin-bottom: var(--cp-space-md);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Eyebrow label */
.compos-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cp-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cp-accent);
    margin-bottom: var(--cp-space-sm);
}
.compos-eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--cp-accent);
    border-radius: 1px;
}

/* Shared widget header (eyebrow + heading + subheading) — prize-draw style */
.compos-widget-header { margin-bottom: var(--cp-space-lg); display: flex; flex-direction: column; gap: var(--cp-space-xs); }
.compos-widget-header--centre { text-align: center; align-items: center; }
.compos-widget-header--centre .compos-eyebrow { margin-left: auto; margin-right: auto; }
.compos-widget-header--left   { text-align: left; align-items: flex-start; }
.compos-widget-heading {
    font-family: var(--cp-font-heading), inherit;
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 800;
    color: var(--cp-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}
.compos-widget-subheading {
    color: var(--cp-text-muted);
    font-size: var(--cp-font-size-lead);
    line-height: 1.55;
    margin: 0;
    max-width: 680px;
}
.compos-widget-header--centre .compos-widget-subheading { margin-left: auto; margin-right: auto; }

/* Status / category pill */
.compos-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: var(--cp-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.compos-pill--accent  { background: rgba(var(--cp-accent-rgb,255,101,14),0.15);            color: var(--cp-accent); }
.compos-pill--success { background: rgba(var(--cp-status-success-rgb,16,185,129),0.15);    color: var(--cp-status-success); }
.compos-pill--warning { background: rgba(var(--cp-status-warning-rgb,217,119,6),0.15);     color: var(--cp-status-warning); }
.compos-pill--error   { background: rgba(var(--cp-status-error-rgb,239,68,68),0.15);       color: var(--cp-status-error); }
.compos-pill--muted   { background: var(--cp-border);                                       color: var(--cp-text-muted); }

/* Rich overlay gradient — image cards */
.compos-overlay-gradient {
    background: linear-gradient(
        0deg,
        rgba(var(--cp-dark-rgb,14,22,40),0.92) 0%,
        rgba(var(--cp-dark-rgb,14,22,40),0.5) 50%,
        transparent 100%
    ); /* rgba dark-rgb — overlay gradient, not brand colour */
}

/* Grid containers — prevent overflow */
.compos-post-grid,
.compos-cards-grid,
.compos-product-grid,
.compos-category-grid,
.compos-masonry,
.compos-team,
.compos-services,
.compos-pricing,
.compos-counters,
.compos-flip-grid,
.compos-related-grid,
.compos-social-proof-grid {
    width: 100%;
    overflow: hidden;
}

/* Grid items — contain content */
.compos-post-card,
.compos-product-card,
.compos-service-card,
.compos-team-member,
.compos-pricing-card,
.compos-flip-card,
.compos-related-card {
    min-width: 0;
    overflow: hidden;
}

/* Image containers */
.post-thumbnail,
.compos-post-card .product-thumbnail,
.compos-masonry-item,
.card-carousel-image,
.compos-gallery-item,
.fh-visual { overflow: hidden; }

.compos-post-card img,
.compos-team-member img,
.compos-masonry-item img,
.compos-gallery-item img,
.compos-related-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}