/* SONGSHOVE V8.5.0 — Controls Foundation Pass 11
 * Shared placeholder/disabled/invalid form-state ownership; exact existing values preserved.
 * Coded: 2026-09-17
 */
/* SONGSHOVE V8.5.0 — Controls Foundation Pass 10: shared proven control transition ownership only; computed behavior preserved. Coded: 2026-09-17 */
/* SONGSHOVE V8.5.0 — Buttons / Forms / Common Controls Foundation Pass 9
 * Shared ownership for existing customer-facing interactive-link decoration resets.
 * Existing `text-decoration: none` behavior is preserved exactly; no new selectors are changed.
 * Coded: 2026-09-17
 */
/* SONGSHOVE V8.5.0 — Buttons / Forms / Common Controls Foundation Pass 8: shared interactive pointer-cursor ownership; behavior remains exactly pointer. Coded: 2026-09-17 */
/* SONGSHOVE V8.5.0 — Controls Foundation Pass 6: existing native appearance resets now use the shared control token; rendered/browser behavior unchanged. Coded: 2026-09-17 */
/* Buttons / Forms / Common Controls Foundation Pass 2: shared compact-control radius/min-height ownership at identical rendered values; no layout or behavior redesign. Coded: 2026-09-17 */
/* Card Foundation Grouping Pass 22: shared pill/capsule radius ownership; rendered radius remains 999px. Coded: 2026-09-17 */
/* Card Foundation Grouping Pass 16 — shared static shadow ownership; rendered values unchanged. Coded: 2026-09-17 */
/* Card Foundation Grouping Pass 13: shared soft-blue badge border ownership only. Coded: 2026-09-17 */
/*
 * Card Foundation Grouping Pass 9 — exact palette catch-up.
 * Routes missed compressed/important white, soft, blue, dark-blue, and standard-border values through existing shared SongShove tokens without changing rendered values.
 * Coded: 2026-09-17
 */
/* SONGSHOVE V8.5.0 — Card Foundation Grouping Pass 5
 * Centralizes repeated neutral supporting surfaces and borders at exact existing values.
 * No layout, spacing, radius, shadow, responsive, or functional behavior changes.
 * Coded: 2026-09-17
 */
/* Card Foundation Grouping Pass 3: shared status/support surface ownership; exact rendered values preserved. Coded: 2026-09-17 */
/* Typography color + weight grouping Pass 2: repeated customer-facing text/status colors and 950 weight now use shared exact-value controls. Coded: 2026-09-17 */
/* SONGSHOVE V8.5.0 — Typography Color + Weight Grouping Pass 1
 * Routes common text colors and font weights through shared SongShove tokens without changing layout or functionality.
 * Coded: 2026-09-17
 */
/* SONGSHOVE V8.5.0 — Typography Grouping Pass 9
 * Routes only traced text-role sizes through shared tokens at identical computed sizes.
 * No layout, function, icon, placeholder, responsive clamp() or rendered font-size change is made.
 * Coded: 2026-09-17
 */
/* SONGSHOVE V8.5.0 — Typography Grouping Pass 5
 * Routes remaining common customer-facing font sizes through exact-value shared tokens.
 * No rendered font-size values are changed in this pass.
 * Coded: 2026-09-17
 */
/* SONGSHOVE V8.5.0 — Typography Grouping Pass 3
 * Reuses existing shared typography tokens at identical computed sizes so future design changes can be controlled centrally.
 * No visual font-size values are changed in this pass.
 * Coded: 2026-09-16
 */
/* ============================================================
   SONGSHOVE V5 — MAIN FRONTEND STYLES
   Shared light-theme styles for campaign ideas, questionnaires,
   WooCommerce View Order pages and frontend accessibility.
   ============================================================ */

:root {
    --songshove-primary: #2563EB;
    --songshove-primary-dark: #1D4ED8;

    --songshove-navy: #172554;

    --songshove-page: #F5F7FA;
    --songshove-card: #FFFFFF;
    --songshove-soft: #F8FAFC;

    --songshove-text: #18181B;
    --songshove-muted: #62656D;

    --songshove-border: var(--ss-border-ui-tertiary);

    --songshove-success: #16A34A;
    --songshove-error: #DC2626;
}


/* ============================================================
   CONCEPT CARDS
   ============================================================ */

.songshove-concept {
    position: relative;

    padding: 28px;

    margin-bottom: 18px;

    background: var(--songshove-card);

    border: 1px solid var(--songshove-border);
    border-radius: 14px;

    color: var(--songshove-text);

    box-shadow:
        var(--ss-shadow-content-card-soft);

    box-sizing: border-box;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.songshove-concept:hover {
    border-color: #CBD5E1;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.07);

    transform: translateY(-1px);
}


/* Small professional blue accent */

.songshove-concept::before {
    content: "";

    position: absolute;

    top: 0;
    left: 28px;

    width: 48px;
    height: 3px;

    background: var(--songshove-primary);

    border-radius: 0 0 3px 3px;
}


/* ============================================================
   CONCEPT NUMBER
   ============================================================ */

.songshove-concept-number {
    margin-bottom: 7px;

    color: var(--songshove-primary);

    font-size: var(--ss-type-support);
    font-weight: var(--ss-weight-bold);

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/* ============================================================
   CONCEPT TITLE
   ============================================================ */

.songshove-concept h3 {
    margin: 0 0 16px;

    color: var(--songshove-text);

    font-size: var(--ss-type-concept-title);
    line-height: 1.25;

    font-weight: var(--ss-weight-bold);
}


/* ============================================================
   TAGS
   ============================================================ */

.songshove-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 20px;
}


.songshove-tag {
    display: inline-flex;

    align-items: center;

    padding: 6px 10px;

    background: var(--ss-blue-soft);

    border: 1px solid var(--ss-border-badge-blue);
    border-radius: var(--ss-radius-pill);

    color: var(--ss-blue-deeper);

    font-size: var(--ss-type-support);
    font-weight: var(--ss-weight-650);

    line-height: 1.2;
}


/* ============================================================
   RESULT FIELDS
   ============================================================ */

.songshove-field {
    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid var(--songshove-border);
}


.songshove-field strong {
    display: block;

    margin-bottom: 7px;

    color: var(--songshove-text);

    font-size: var(--ss-type-medium);
    font-weight: var(--ss-weight-bold);

    line-height: 1.3;
}


.songshove-field p {
    margin: 0;

    color: #3F4148;

    font-size: var(--ss-type-subheading);
    line-height: 1.7;

    white-space: pre-wrap;
}


/* ============================================================
   HOOK / IDEA / CATCHPHRASE
   ============================================================ */

.songshove-field:first-of-type {
    padding: 16px 18px;

    margin-top: 18px;

    background: var(--ss-status-bg);

    border: 1px solid #E2E8F0;
    border-left: 4px solid var(--songshove-primary);

    border-radius: 8px;
}


.songshove-field:first-of-type strong {
    color: var(--songshove-navy);
}


.songshove-field:first-of-type p {
    color: var(--songshove-text);

    font-size: var(--ss-type-heading);
    font-weight: var(--ss-weight-semibold);

    line-height: 1.6;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {


    .songshove-concept {
        padding: 20px;

        border-radius: 10px;
    }


    .songshove-concept h3 {
        font-size: var(--ss-type-concept-title-mobile);
    }


    .songshove-field p {
        font-size: var(--ss-type-emphasis);
    }


    .songshove-field:first-of-type {
        padding: 14px;
    }


    .songshove-field:first-of-type p {
        font-size: var(--ss-type-subheading);
    }

}


/* ============================================================
   QUESTIONNAIRE ARTWORK UPLOADS
   ============================================================ */

.songshove-questionnaire-artwork-field {
    margin: 0 0 20px;
}


.songshove-questionnaire-artwork-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--songshove-text);

    font-size: var(--ss-type-medium);
    font-weight: var(--ss-weight-strong);
    line-height: 1.4;
}


.songshove-questionnaire-artwork-field input[type="file"] {
    display: block;

    width: 100%;

    margin-top: 8px;
    padding: 10px;

    box-sizing: border-box;

    background: var(--ss-surface-white);

    border: 1px solid #CBD5E1;
    border-radius: var(--ss-radius-control);

    color: var(--songshove-text);

    font-family: inherit;
    font-size: var(--ss-type-compact);
}


.songshove-questionnaire-artwork-field input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 13px;

    background: var(--songshove-primary);

    border: 1px solid var(--songshove-primary);
    border-radius: var(--ss-control-radius-tight);

    color: var(--ss-text-inverse);

    font-family: inherit;
    font-size: var(--ss-type-support);
    font-weight: var(--ss-weight-bold);

    cursor: var(--ss-interactive-cursor);

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.songshove-questionnaire-artwork-field input[type="file"]::file-selector-button:hover {
    background: var(--songshove-primary-dark);

    border-color: var(--songshove-primary-dark);
}


/* ============================================================
   SONGSHOVE QUESTIONNAIRE DROPDOWN
   ============================================================ */

.songshove-customer-questionnaire {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    background: var(--ss-surface-white);

    border: 1px solid var(--ss-border-ui-tertiary) !important;
    border-radius: 10px !important;

    overflow: hidden;
}

.songshove-questionnaire-summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;

    cursor: var(--ss-interactive-cursor);

    list-style: none;

    background: var(--ss-status-bg);
}

.songshove-questionnaire-summary:hover {
    background: #f1f5f9;
}

.songshove-questionnaire-summary::-webkit-details-marker {
    display: none;
}

.songshove-questionnaire-title {
    color: var(--ss-text-ink);

    font-size: var(--ss-type-card);
    font-weight: var(--ss-weight-bold);
}

.songshove-questionnaire-click {
    position: relative;

    padding-right: 26px;

    color: var(--ss-status-text);

    font-size: var(--ss-type-compact);
    font-weight: var(--ss-weight-semibold);
}

.songshove-questionnaire-click::after {
    content: "";

    position: absolute;

    right: 3px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-right: 2px solid #62656d;
    border-bottom: 2px solid #62656d;

    transform:
        translateY(-65%)
        rotate(45deg);

    transition:
        transform 0.2s ease;
}

.songshove-customer-questionnaire[open]
.songshove-questionnaire-click::after {
    transform:
        translateY(-35%)
        rotate(225deg);
}

.songshove-questionnaire-content {
    padding: 20px;

    border-top: 1px solid var(--ss-border-ui-tertiary);

    background: var(--ss-surface-white);
}

.songshove-questionnaire-intro {
    margin-top: 0;
    margin-bottom: 20px;

    color: #555555;
}

@media (max-width: 768px) {

    .songshove-questionnaire-summary {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }

    .songshove-questionnaire-title {
        font-size: var(--ss-type-heading);
    }

    .songshove-questionnaire-click {
        font-size: var(--ss-type-support);
    }
}


/* SONGSHOVE V8.8.0 — VIEW ORDER LEGACY OWNER RETIRED / PASS 1
 * Why: View Order now has a dedicated page stylesheet. The old sidebar/full-width
 * rules were removed here so there is one clear owner instead of stacked legacy
 * overrides. Coded: 2026-09-22
 */

/* ============================================================
   SONGSHOVE PRODUCT QUESTIONNAIRE
   ============================================================ */

.songshove-questionnaire {
    width: 100%;
    max-width: 100%;

    margin: 32px 0 28px;
    padding: 30px;

    box-sizing: border-box;

    background: var(--songshove-page);

    border: 1px solid var(--songshove-border);
    border-radius: 18px;

    color: var(--songshove-text);
}


/* ============================================================
   QUESTIONNAIRE MAIN HEADING
   ============================================================ */

.songshove-questionnaire > h2 {
    margin: 0 0 8px;

    color: var(--songshove-text);

    /* Typography Grouping Pass 8: shared legacy Questionnaire main-title ownership; rendered size remains 28px. Coded: 2026-09-17 */
    font-size: var(--ss-type-questionnaire-main-title);
    line-height: 1.2;
    font-weight: var(--ss-weight-bold);
}


/* Intro text directly below questionnaire title */

.songshove-questionnaire > h2 + p {
    margin: 0 0 30px;

    color: var(--songshove-muted);

    font-size: var(--ss-type-subheading);
    line-height: 1.6;
}


/* ============================================================
   QUESTIONNAIRE SECTION HEADINGS
   ============================================================ */

.songshove-questionnaire > h3 {
    position: relative;

    margin: 34px 0 20px;
    padding: 15px 18px 15px 22px;

    background: var(--songshove-card);

    border: 1px solid var(--songshove-border);
    border-radius: 10px;

    color: var(--songshove-navy);

    font-size: var(--ss-type-section);
    line-height: 1.3;
    font-weight: var(--ss-weight-bold);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.03);
}


/* Blue accent bar */

.songshove-questionnaire > h3::before {
    content: "";

    position: absolute;

    left: 0;
    top: 10px;
    bottom: 10px;

    width: 4px;

    background: var(--songshove-primary);

    border-radius: 0 4px 4px 0;
}


/* First section doesn't need a huge gap */

.songshove-questionnaire > h3:first-of-type {
    margin-top: 0;
}


/* ============================================================
   FIELD SPACING
   ============================================================ */

.songshove-questionnaire > p {
    margin: 0 0 20px;
}


/* ============================================================
   LABELS
   ============================================================ */

.songshove-questionnaire label {
    display: block;

    margin-bottom: 7px;

    color: var(--songshove-text);

    font-size: var(--ss-type-medium);
    line-height: 1.4;
    font-weight: var(--ss-weight-strong);
}


/* ============================================================
   TEXT INPUTS / SELECTS / TEXTAREAS
   ============================================================ */

.songshove-questionnaire input[type="text"],
.songshove-questionnaire input[type="email"],
.songshove-questionnaire input[type="url"],
.songshove-questionnaire input[type="number"],
.songshove-questionnaire input[type="date"],
.songshove-questionnaire select,
.songshove-questionnaire textarea {
    display: block;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    background: var(--ss-surface-white);

    border: 1px solid #CBD5E1;
    border-radius: var(--ss-radius-control);

    color: var(--songshove-text);

    font-family: inherit;
    font-size: var(--ss-type-emphasis);
    line-height: 1.5;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


/* Normal single-line field height */

.songshove-questionnaire input[type="text"],
.songshove-questionnaire input[type="email"],
.songshove-questionnaire input[type="url"],
.songshove-questionnaire input[type="number"],
.songshove-questionnaire input[type="date"],
.songshove-questionnaire select {
    min-height: 50px;
}


/* Textareas */

.songshove-questionnaire textarea {
    min-height: 120px;

    resize: vertical;
}


/* Lyrics field gets more room */

.songshove-questionnaire #songshove_lyrics {
    min-height: 240px;
}


/* Focus state */

.songshove-questionnaire input[type="text"]:focus,
.songshove-questionnaire input[type="email"]:focus,
.songshove-questionnaire input[type="url"]:focus,
.songshove-questionnaire input[type="number"]:focus,
.songshove-questionnaire input[type="date"]:focus,
.songshove-questionnaire select:focus,
.songshove-questionnaire textarea:focus {
    background: var(--ss-surface-white);

    border-color: var(--songshove-primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* Disabled region dropdown */

.songshove-questionnaire select:disabled {
    background: var(--ss-control-disabled-surface);

    color: var(--ss-control-disabled-text);

    cursor: not-allowed;
}


/* Placeholder text */

.songshove-questionnaire input::placeholder,
.songshove-questionnaire textarea::placeholder {
    color: var(--ss-control-placeholder);
}


/* ============================================================
   MULTIPLE CHOICE GROUPS
   ============================================================ */

.songshove-emotions,
.songshove-content-types,
.songshove-platforms,
.songshove-listening-platforms,
.songshove-promotional-assets,
.songshove-outreach-willingness,
.songshove-campaign-help {
    margin: 8px 0 24px;
    padding: 20px;

    background: var(--songshove-card);

    border: 1px solid var(--songshove-border);
    border-radius: 12px;
}


/* Question heading */

.songshove-emotions > p:first-child,
.songshove-content-types > p:first-child,
.songshove-platforms > p:first-child,
.songshove-listening-platforms > p:first-child,
.songshove-promotional-assets > p:first-child,
.songshove-outreach-willingness > p:first-child,
.songshove-campaign-help > p:first-child {
    margin: 0 0 3px !important;
}


.songshove-emotions > p:first-child strong,
.songshove-content-types > p:first-child strong,
.songshove-platforms > p:first-child strong,
.songshove-listening-platforms > p:first-child strong,
.songshove-promotional-assets > p:first-child strong,
.songshove-outreach-willingness > p:first-child strong,
.songshove-campaign-help > p:first-child strong {
    color: var(--songshove-text);

    font-size: var(--ss-type-emphasis);
    font-weight: var(--ss-weight-bold);
}


/* Select all helper */

.songshove-emotions > p:nth-child(2),
.songshove-content-types > p:nth-child(2),
.songshove-platforms > p:nth-child(2),
.songshove-listening-platforms > p:nth-child(2),
.songshove-promotional-assets > p:nth-child(2),
.songshove-outreach-willingness > p:nth-child(2),
.songshove-campaign-help > p:nth-child(2) {
    margin: 0 0 14px !important;

    color: var(--songshove-muted) !important;

    font-size: var(--ss-type-compact);
}


/* ============================================================
   CHECKBOX PILLS
   ============================================================ */

.songshove-emotions label,
.songshove-content-types label,
.songshove-platforms label,
.songshove-listening-platforms label:has(input[type="checkbox"]),
.songshove-promotional-assets label,
.songshove-outreach-willingness label,
.songshove-campaign-help label {
    display: inline-flex !important;

    align-items: center;

    width: auto;

    margin: 5px 5px 5px 0 !important;
    padding: 9px 13px;

    background: var(--ss-status-bg);

    border: 1px solid #DDE3EA;
    border-radius: var(--ss-radius-pill);

    color: #34363D;

    font-size: var(--ss-type-compact);
    font-weight: var(--ss-weight-650);

    cursor: var(--ss-interactive-cursor);

    user-select: none;

    transition: var(--ss-transition-control-interactive);
}


.songshove-emotions label:hover,
.songshove-content-types label:hover,
.songshove-platforms label:hover,
.songshove-listening-platforms label:has(input[type="checkbox"]):hover,
.songshove-promotional-assets label:hover,
.songshove-outreach-willingness label:hover,
.songshove-campaign-help label:hover {
    background: var(--ss-blue-soft);

    border-color: var(--ss-blue-border);

    color: var(--ss-blue-deeper);
}


/* Actual checkbox */

.songshove-emotions input[type="checkbox"],
.songshove-content-types input[type="checkbox"],
.songshove-platforms input[type="checkbox"],
.songshove-listening-platforms input[type="checkbox"],
.songshove-promotional-assets input[type="checkbox"],
.songshove-outreach-willingness input[type="checkbox"],
.songshove-campaign-help input[type="checkbox"] {
    width: 16px;
    height: 16px;

    margin: 0 7px 0 0;

    accent-color: var(--songshove-primary);

    cursor: var(--ss-interactive-cursor);
}


/* Selected pill */

.songshove-emotions label:has(input:checked),
.songshove-content-types label:has(input:checked),
.songshove-platforms label:has(input:checked),
.songshove-listening-platforms label:has(input[type="checkbox"]):has(input:checked),
.songshove-promotional-assets label:has(input:checked),
.songshove-outreach-willingness label:has(input:checked),
.songshove-campaign-help label:has(input:checked) {
    background: var(--ss-blue-soft);

    border-color: var(--songshove-primary);

    color: var(--ss-blue-deeper);

    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.05);
}


/* ============================================================
   REQUIRED FIELD VISUALS
   ============================================================ */

.songshove-questionnaire input:required,
.songshove-questionnaire select:required,
.songshove-questionnaire textarea:required {
    border-left-width: 3px;
}


/* Valid required field */

.songshove-questionnaire input:required:valid,
.songshove-questionnaire select:required:valid,
.songshove-questionnaire textarea:required:valid {
    border-left-color: #CBD5E1;
}


/* Only highlight invalid fields after browser interaction/focus */

.songshove-questionnaire input:required:focus:invalid,
.songshove-questionnaire select:required:focus:invalid,
.songshove-questionnaire textarea:required:focus:invalid {
    border-color: var(--ss-control-invalid-border);

    box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.08);
}


/* ============================================================
   PRODUCT ADD TO CART AREA
   ============================================================ */

.single-product form.cart {
    margin-top: 22px;
}


/* Main Add to Cart button */

.single-product form.cart .single_add_to_cart_button {
    min-height: 52px;

    padding: 13px 24px !important;

    background: var(--songshove-primary) !important;

    border: 1px solid var(--songshove-primary) !important;
    border-radius: var(--ss-radius-control) !important;

    color: var(--ss-text-inverse) !important;

    font-size: var(--ss-type-subheading) !important;
    font-weight: var(--ss-weight-bold) !important;

    line-height: 1.2 !important;

    box-shadow:
        0 4px 14px rgba(37, 99, 235, 0.18);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.single-product form.cart .single_add_to_cart_button:hover {
    background: var(--songshove-primary-dark) !important;

    border-color: var(--songshove-primary-dark) !important;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(37, 99, 235, 0.22);
}


/* ============================================================
   MOBILE QUESTIONNAIRE
   ============================================================ */

@media (max-width: 768px) {

    .songshove-questionnaire {
        margin: 22px 0;

        padding: 18px;

        border-radius: 12px;
    }


    .songshove-questionnaire > h2 {
        /* Typography Grouping Pass 8: shared mobile title ownership; rendered size remains 24px. Coded: 2026-09-17 */
        font-size: var(--ss-type-questionnaire-main-title-mobile);
    }


    .songshove-questionnaire > h2 + p {
        font-size: var(--ss-type-emphasis);

        margin-bottom: 24px;
    }


    .songshove-questionnaire > h3 {
        margin-top: 28px;

        padding: 13px 15px 13px 18px;

        font-size: var(--ss-type-heading);
    }


.songshove-emotions,
.songshove-content-types,
.songshove-platforms,
.songshove-listening-platforms,
.songshove-promotional-assets,
.songshove-outreach-willingness,
.songshove-campaign-help {
        padding: 15px;
    }


.songshove-emotions label,
.songshove-content-types label,
.songshove-platforms label,
.songshove-listening-platforms label:has(input[type="checkbox"]),
.songshove-promotional-assets label,
.songshove-outreach-willingness label,
.songshove-campaign-help label {
    padding: 8px 11px;

    font-size: var(--ss-type-support);
}


.songshove-questionnaire input[type="text"],
.songshove-questionnaire input[type="email"],
.songshove-questionnaire input[type="url"],
.songshove-questionnaire input[type="number"],
.songshove-questionnaire input[type="date"],
.songshove-questionnaire select,
.songshove-questionnaire textarea {
    font-size: var(--ss-type-subheading);
}

}


/* ============================================================
   SONGSHOVE QUESTIONNAIRE SECTION CARDS
   ============================================================ */

.songshove-form-section {
    margin: 0 0 24px;
    padding: 24px;

    background: var(--songshove-card);

    border: 1px solid var(--songshove-border);
    border-radius: 14px;

    box-shadow:
        var(--ss-shadow-content-card-soft);
}


.songshove-form-section > h3 {
    position: relative;

    margin: -24px -24px 24px;
    padding: 17px 20px 17px 24px;

    background: var(--songshove-soft);

    border-bottom: 1px solid var(--songshove-border);
    border-radius: 14px 14px 0 0;

    color: var(--songshove-navy);

    font-size: var(--ss-type-section);
    line-height: 1.3;
    font-weight: var(--ss-weight-bold);

    box-shadow: none;
}


.songshove-form-section > h3::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 4px;

    background: var(--songshove-primary);

    border-radius: 0 4px 4px 0;
}


.songshove-form-section > p:last-child {
    margin-bottom: 0;
}


@media (max-width: 768px) {

    .songshove-form-section {
        padding: 18px;

        border-radius: 12px;
    }


    .songshove-form-section > h3 {
        margin: -18px -18px 20px;

        padding: 15px 16px 15px 20px;

        border-radius: 12px 12px 0 0;

        font-size: var(--ss-type-heading);
    }

}

/* ============================================================
   QUESTIONNAIRE INTRO HEADER
   ============================================================ */

.songshove-questionnaire-header {
    margin: 0 0 28px;
    padding: 30px;

    background: var(--ss-surface-white);

    border: 1px solid var(--songshove-border);
    border-radius: 14px;

    text-align: center;

    box-shadow:
        var(--ss-shadow-content-card-soft);
}


/* Small top label */

.songshove-questionnaire-badge {
    display: inline-block;

    margin-bottom: 12px;
    padding: 6px 11px;

    background: var(--ss-blue-soft);

    border: 1px solid var(--ss-border-badge-blue);
    border-radius: var(--ss-radius-pill);

    color: var(--songshove-primary);

    font-size: var(--ss-type-body);
    line-height: 1;
    font-weight: var(--ss-weight-bold);

    letter-spacing: 0.08em;
}


/* Main title */

.songshove-questionnaire-header h2 {
    margin: 0 0 10px;

    color: var(--songshove-navy);

    /* Typography Grouping Pass 8: shared Questionnaire header ownership; rendered size remains 30px. Coded: 2026-09-17 */
    font-size: var(--ss-type-questionnaire-header-title);
    line-height: 1.2;
    font-weight: var(--ss-weight-bold);
}


/* Intro */

.songshove-questionnaire-subtitle {
    max-width: 720px;

    margin: 0 auto 20px !important;

    color: var(--songshove-muted);

    font-size: var(--ss-type-emphasis);
    line-height: 1.65;
}


/* Three quick benefits */

.songshove-questionnaire-highlights {
    display: flex;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}


.songshove-questionnaire-highlights span {
    display: inline-flex;

    align-items: center;

    padding: 8px 11px;

    background: var(--songshove-soft);

    border: 1px solid var(--songshove-border);
    border-radius: 8px;

    color: #34363D;

    font-size: var(--ss-type-support);
    line-height: 1.3;
    font-weight: var(--ss-weight-strong);
}


/* Make check marks SongShove blue */

.songshove-questionnaire-highlights span::first-letter {
    color: var(--songshove-primary);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .songshove-questionnaire-header {
        padding: 22px 16px;

        border-radius: 12px;
    }


    .songshove-questionnaire-header h2 {
        /* Typography Grouping Pass 8: shared mobile header ownership; rendered size remains 25px. Coded: 2026-09-17 */
        font-size: var(--ss-type-questionnaire-header-title-mobile);
    }


    .songshove-questionnaire-subtitle {
        font-size: var(--ss-type-medium);
    }


    .songshove-questionnaire-highlights {
        display: grid;

        grid-template-columns: 1fr;

        gap: 7px;
    }


    .songshove-questionnaire-highlights span {
        justify-content: center;

        width: 100%;

        box-sizing: border-box;
    }

}


/* Questionnaire top label */

.songshove-questionnaire-kicker {
    margin: 0 0 10px;

    color: var(--songshove-primary);

    font-size: var(--ss-type-medium);
    line-height: 1.3;
    font-weight: var(--ss-weight-bold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.songshove-section-intro {
    margin: 0 0 20px !important;

    color: var(--songshove-muted);

    font-size: var(--ss-type-medium);
    line-height: 1.6;
}

.songshove-field-help {
    display: block;

    margin: -2px 0 8px;

    color: var(--songshove-muted);

    font-size: var(--ss-type-support);
    line-height: 1.4;
}

.songshove-field-note {
    margin: 6px 0 20px;
    padding: 12px 14px;

    background: var(--songshove-soft);
    border-left: 3px solid var(--songshove-primary);
    border-radius: 6px;
}

.songshove-field-note strong {
    display: block;
    margin-bottom: 3px;

    color: var(--songshove-text);
    font-size: var(--ss-type-compact);
    font-weight: var(--ss-weight-strong);
}

.songshove-field-note span {
    display: block;

    color: var(--songshove-muted);
    font-size: var(--ss-type-support);
    font-weight: var(--ss-weight-regular);
    line-height: 1.5;
}


/* ============================================================
   TYPOGRAPHY GROUPING PASS 4 — GENERAL CUSTOMER UI
   Purpose: Move remaining exact-match questionnaire/order font-size
   literals onto existing shared type tokens without changing rendered size.
   Coded: 2026-09-16
   ============================================================ */
.songshove-questionnaire .songshove-group-label {
    margin: 0 0 7px !important;

    color: var(--songshove-text) !important;

    font-family: inherit !important;
    font-size: var(--ss-type-medium) !important;
    line-height: 1.4 !important;
    font-weight: var(--ss-weight-strong) !important;
}

/* Hide quantity selector only on the SongShove campaign product */
.single-product form.cart:has(#songshove-questionnaire) .quantity {
    display: none !important;
}

/* ============================================================
   MARKETING IDEA ACCORDIONS
   ============================================================ */


/* Expand / Collapse toolbar */

.songshove-idea-controls {
    display: flex;
    align-items: center;

    width: fit-content;

    margin: 0 0 20px;

    overflow: hidden;

    background: var(--ss-surface-white);

    border: 1px solid var(--songshove-border);
    border-radius: 9px;

    box-shadow:
        var(--ss-shadow-filter-control);
}


.songshove-idea-control-button {
    appearance: var(--ss-control-native-appearance);
    -webkit-appearance: var(--ss-control-native-appearance);

    margin: 0;
    padding: 9px 15px;

    background: var(--ss-surface-white);

    border: 0;
    border-radius: 0;

    color: var(--songshove-primary);

    font-family: inherit;
    font-size: var(--ss-type-support);
    line-height: 1.2;
    font-weight: var(--ss-weight-bold);

    cursor: var(--ss-interactive-cursor);

    transition: var(--ss-transition-control-basic);
}


.songshove-idea-control-button +
.songshove-idea-control-button {
    border-left: 1px solid var(--songshove-border);
}


.songshove-idea-control-button:hover {
    background: var(--songshove-primary);

    color: var(--ss-text-inverse);
}


/* Actual Marketing Idea card */

.songshove-marketing-idea {
    padding: 0;
    overflow: hidden;
}


/* Clickable top of card */

.songshove-marketing-idea-summary {
    display: block;

    padding: 24px 28px;

    cursor: var(--ss-interactive-cursor);

    list-style: none;

    box-sizing: border-box;

    transition:
        background 0.15s ease;
}


.songshove-marketing-idea-summary::-webkit-details-marker {
    display: none;
}


.songshove-marketing-idea-summary:hover {
    background: var(--songshove-soft);
}


/* ============================================================
   LINE 1 — ARROW + MARKETING IDEA NUMBER
   ============================================================ */

.songshove-marketing-idea-topline {
    display: flex !important;

    flex-direction: row !important;
    align-items: center !important;

    gap: 9px;

    width: 100%;

    margin: 0 0 8px;
    padding: 0;
}


.songshove-marketing-idea-arrow {
    display: inline-block;

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    margin: 0 2px 0 1px;

    border-right: 2px solid var(--songshove-primary);
    border-bottom: 2px solid var(--songshove-primary);

    transform: rotate(-45deg);

    transition:
        transform 0.2s ease;
}


.songshove-marketing-idea[open]
.songshove-marketing-idea-arrow {
    transform: rotate(45deg);
}


.songshove-marketing-idea
.songshove-concept-number {
    display: inline-block;

    width: auto;

    margin: 0;
    padding: 0;

    line-height: 1.2;
}


/* ============================================================
   LINE 2 — TITLE
   ============================================================ */

.songshove-marketing-idea-summary h3 {
    margin: 0 0 14px;

    color: var(--songshove-text);

    /* Typography Grouping Pass 8: shared summary-title ownership only; rendered size remains 23px. Coded: 2026-09-17 */
    font-size: var(--ss-type-summary-title);
    line-height: 1.3;
    font-weight: var(--ss-weight-bold);
}


/* ============================================================
   LINE 3 — TAGS
   ============================================================ */

.songshove-marketing-idea-summary
.songshove-tags {
    margin: 0;
}


/* ============================================================
   EXPANDED CONTENT
   ============================================================ */

.songshove-marketing-idea-content {
    padding:
        0
        28px
        28px;

    border-top: 1px solid var(--songshove-border);
}


/* Mobile */

@media (max-width: 768px) {

    .songshove-marketing-idea-summary {
        padding: 20px;
    }


    .songshove-marketing-idea-summary h3 {
        font-size: var(--ss-type-page);
    }


    .songshove-marketing-idea-content {
        padding:
            0
            20px
            20px;
    }


    .songshove-idea-control-button {
        padding: 8px 11px;

        font-size: var(--ss-type-support);
    }

}

/* Tighten questionnaire logo/header spacing */

.songshove-questionnaire-logo {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.songshove-questionnaire-logo img {
    display: inline-block !important;

    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.songshove-questionnaire-kicker {
    margin-top: 4px !important;
}


/* ============================================================
   GLOBAL FOCUS STYLE
   ============================================================ */

/* Remove WordPress/theme focus outline on mouse clicks */
.wp-site-blocks *:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Clean accessible focus style for keyboard navigation */
.wp-site-blocks *:focus-visible {
    outline: 2px solid var(--songshove-primary) !important;
    outline-offset: 3px !important;
}


/* SONGSHOVE V8.8.0 — VIEW ORDER LEGACY RECEIPT CSS RETIRED / PASS 1
 * Why: The previous compact-receipt styling is replaced by the dedicated Form 67
 * View Order stylesheet. Intentional no-sidebar, no-billing-address and no-order-
 * again behavior is preserved there instead of leaving competing page owners.
 * Coded: 2026-09-22
 */

/* ============================================================
   NEEDS TRACE / UNCONFIRMED THEME-WIDE RULES
   ------------------------------------------------------------
   These rules are intentionally kept unchanged.
   Their CSS behavior is clear, but their exact current page/
   template dependency has not yet been fully traced in V5.
   Do not remove or change them until that dependency is checked.
   ============================================================ */

/* Home page paragraph width */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 80% !important;
}

/*
 * SONGSHOVE V8.4 — DESKTOP OUTER-PADDING WIDTH FIX REVERT
 * Why: Restore the WordPress global horizontal padding after the full-width override
 * introduced a horizontal scrollbar on desktop. This is a test revert only; all later
 * SongShove changes remain intact.
 * Coded: 2026-09-14
 */

/* Bold main navigation menu */
.wp-block-navigation .wp-block-navigation-item__content {
    font-weight: var(--ss-weight-regular) !important;
}

body.woocommerce-account
.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-bottom: 0 !important;
}

.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-top: 10px !important;
}

/* Reduce Twenty Twenty-Five spacing above WooCommerce account content */

.woocommerce-account main {
    margin-top: 0 !important;
}
/* SONGSHOVE CARD FOUNDATION — Exact 9px form/action control radii in this stylesheet now use the shared control-radius token so future control design can be managed centrally without changing current geometry. Coded: 2026-09-17 */