/**
 * Custom Product Accordion
 * Front-end styles
 *
 * @package CustomProductAccordion
 */

/* ============================================================
   Wrapper + heading
   ============================================================ */
.cpa-wrapper {
    font-family: inherit;
    color: #1a1a1a;
    margin: 0 0 24px 0;
}

.cpa-main-title {
    font-family: 'source-serif-pro', serif;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.cpa-panels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================================
   Panel
   ============================================================ */
.cpa-panel {
    background: #f1f1ef;
    border-radius: 14px;
    overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

.cpa-panel-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: 0;
    padding: 28px 20px;
    cursor: pointer;
    font: inherit;
    color: var(--oil);
    text-align: left;
    line-height: 1.2;
    transition: padding 0.25s ease, color 0.3s ease;
}

.cpa-panel-header:focus-visible {
    outline: 2px solid var(--oil, #111);
    outline-offset: -2px;
}

.cpa-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.cpa-panel-title {
    font-family: 'source-serif-pro', serif;
    font-size: var(--h4);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: inherit;
    line-height: 1.2;
}

/* ---- Selected summary (h6) ----
 * Hidden by default; revealed when the panel has a current selection.
 */
.cpa-selected-summary {
    font-family: 'source-serif-pro', serif;
    font-size: var(--h6);
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    color: inherit;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-2px);
    transition:
        opacity 0.3s ease,
        max-height 0.3s ease,
        transform 0.3s ease,
        margin 0.3s ease;
}

.cpa-panel.has-selection .cpa-selected-summary {
    opacity: 0.85;
    max-height: 3em;
    transform: translateY(0);
    margin-top: 2px;
}

.cpa-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
}

.cpa-panel.is-open .cpa-panel-toggle {
    transform: rotate(180deg);
}

.cpa-panel-toggle .cpa-icon-v {
    transition: opacity 0.25s ease;
    transform-origin: center;
}

.cpa-panel.is-open .cpa-icon-v {
    opacity: 0; /* + becomes − when open */
}

/* ---- Selected panel theme override ----
 * Background → primary, text/icon → snow.
 */
.cpa-panel.has-selection {
    background: var(--primary);
}

.cpa-panel.has-selection .cpa-panel-header,
.cpa-panel.has-selection .cpa-panel-title,
.cpa-panel.has-selection .cpa-selected-summary,
.cpa-panel.has-selection .cpa-panel-toggle {
    color: var(--snow);
}

/* ---- Smooth open/close animation ----
 * grid-template-rows trick: animate from 0fr → 1fr.
 */
.cpa-panel-body {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
}

.cpa-panel-body-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.25s ease 0.05s,
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cpa-panel.is-open .cpa-panel-body {
    grid-template-rows: 1fr;
    padding: 0 20px 22px 20px;
}

.cpa-panel.is-open .cpa-panel-body-inner {
    opacity: 1;
    transform: translateY(0);
}

/* When a selected panel re-opens, swap body back to neutral surface so the
 * options remain readable on a light background. */
.cpa-panel.has-selection.is-open {
    background: #f1f1ef;
}

.cpa-panel.has-selection.is-open .cpa-panel-header,
.cpa-panel.has-selection.is-open .cpa-panel-title,
.cpa-panel.has-selection.is-open .cpa-selected-summary,
.cpa-panel.has-selection.is-open .cpa-panel-toggle {
    color: var(--oil);
}

/* Fallback for browsers without grid-template-rows animation support */
@supports not (grid-template-rows: 0fr) {
    .cpa-panel-body { display: none; padding: 0 20px; }
    .cpa-panel.is-open .cpa-panel-body { display: block; padding: 0 20px 22px 20px; }
    .cpa-panel-body-inner { opacity: 1; transform: none; }
}

/* ============================================================
   List rows (Size, Installation, Accessory Kit)
   ============================================================ */
.cpa-size-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpa-size-row,
.cpa-panel .pewc-item-checkbox,
.cpa-optout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    cursor: pointer;
    list-style: none;
    margin: 0;
}

.cpa-size-row + .cpa-size-row,
.cpa-panel .pewc-item-checkbox + .pewc-item-checkbox,
.cpa-optout {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.cpa-row-label {
    flex: 1;
    font-size: 15px;
}

.cpa-row-price {
    font-size: 14px;
    color: #6b6b6b;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* ---- Custom radio circle for size rows ---- */
.cpa-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #999;
    flex: 0 0 auto;
    position: relative;
    transition: border-color 0.15s ease;
}

.cpa-size-row.is-selected .cpa-radio {
    border-color: #111;
}

.cpa-size-row.is-selected .cpa-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #111;
}

/* ============================================================
   Hide native PEWC bits we replace
   ============================================================ */
.cpa-hidden-native {
    display: none !important;
}

.cpa-hide-native-price {
    display: none !important;
}

.cpa-panel .pewc-field-label,
.cpa-panel .pewc-group-heading-wrapper {
    display: none; /* heading is in the accordion header instead */
}

.cpa-panel .pewc-group-content-wrapper > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Image swatches (Wood Finish, Cloth Color, Cloth Type)

   Always 7 per row, 56×56 swatches, with hover tooltip showing the name.

   PEWC ships its own CSS that fights this layout heavily — borders, paddings,
   widths, margins, hover/checked colors. Every rule below is written with
   higher specificity (or `!important` where PEWC also uses `!important`) to
   keep ours winning.
   ============================================================ */

/* The wrapper grid. PEWC sets this to flex with `space-between`; we override
 * with grid and a fixed 7-column track. */
.cpa-panel .pewc-radio-images-wrapper,
.cpa-panel .pewc-radio-images-wrapper:not(.pewc-component-wrapper),
.cpa-panel .pewc-radio-images-wrapper:not(.pewc-components-wrapper) {
    display: grid;
    grid-template-columns: repeat(7, 56px);
    gap: 18px 16px;
    justify-content: start;
    flex-wrap: initial;
}

/* The per-swatch wrapper. PEWC adds:
 *   - 2px border + 0.5em padding (preset style)
 *   - 8px padding (theme override)
 *   - width: 100%
 *   - margin-bottom: 1em !important
 *   - transition: 0.15s all
 * Reset all of it. */
.cpa-panel .pewc-radio-image-wrapper {
    position: relative;
    width: 56px !important;
    height: 56px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent;
    transition: none;
    flex: none;
}

/* Override PEWC's checked/hover border colors */
.cpa-panel .pewc-radio-image-wrapper.checked,
.cpa-panel .pewc-radio-image-wrapper:hover {
    border-color: transparent !important;
}

/* The label inside each wrapper. PEWC sets `display: block` on `.pewc-radio-image-wrapper label`,
 * the global `label` rule sets `display: flex !important; flex-direction: column`. */
.cpa-panel .pewc-radio-image-wrapper label {
    display: block !important;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}

/* Hide the actual radio input ONLY for image-swatch rows (the swatch image is the visible UI).
 * Radio-button-group rows render the input directly as a custom round indicator and need it visible.
 * PEWC also tries to hide this with `visibility: hidden`; opacity:0 plus pointer-events:none is enough. */
.cpa-panel .pewc-radio-image-wrapper .pewc-radio-form-field,
.cpa-panel .pewc-radio-image-wrapper label input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: 0;
}

/* The swatch image itself.
 * PEWC sets `border: 4px solid transparent` and `align-self: center` on the img,
 * and `border: 4px solid #aaa` on the checked state. We use a 2px ring in the
 * brand color, with proper box-sizing so the ring doesn't push the image out. */
.cpa-panel .pewc-radio-image-wrapper img,
.cpa-panel .pewc-radio-image-wrapper label img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent !important;
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cpa-panel .pewc-radio-image-wrapper label:hover img {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* Selected state — PEWC marks the wrapper with `.checked` AND the input with `:checked`.
 * Either signal sets the ring color. */
.cpa-panel .pewc-radio-image-wrapper input:checked + img,
.cpa-panel .pewc-radio-image-wrapper.checked img,
.cpa-panel .pewc-radio-image-wrapper.checked label img {
    border: 2px solid var(--oil, #111) !important;
}

/* Hide the original text description — replaced by the hover tooltip below */
.cpa-panel .pewc-radio-image-desc {
    display: none !important;
}

/* PEWC's checkmark overlay span — never wanted on swatches */
.cpa-panel .pewc-radio-image-wrapper .pewc-theme-element {
    display: none !important;
}

/* ---- Tooltip on hover/keyboard-focus ----
 * The data-cpa-tooltip attribute is added by the JS from the swatch's
 * .pewc-radio-image-desc text. Renders as a small floating label above
 * the swatch so the user can identify it without a permanent caption.
 */
.cpa-panel .pewc-radio-image-wrapper[data-cpa-tooltip]::after {
    content: attr(data-cpa-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--oil, #1a1a1a);
    color: var(--snow, #fff);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.cpa-panel .pewc-radio-image-wrapper[data-cpa-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--oil, #1a1a1a);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.cpa-panel .pewc-radio-image-wrapper[data-cpa-tooltip]:hover::after,
.cpa-panel .pewc-radio-image-wrapper[data-cpa-tooltip]:hover::before,
.cpa-panel .pewc-radio-image-wrapper[data-cpa-tooltip]:focus-within::after,
.cpa-panel .pewc-radio-image-wrapper[data-cpa-tooltip]:focus-within::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* The (+N) price badge on Centennial Cloth — pinned to the swatch's top-right
 * so it doesn't break the grid or push neighboring swatches around. */
.cpa-panel .pewc-radio-image-wrapper .cpa-row-price.cpa-swatch-price {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--oil, #1a1a1a);
    color: var(--snow, #fff);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
    pointer-events: none;
    z-index: 5;
}

/* ============================================================
   Checkbox rows (Installation, Accessory Kit, Cloth Type extras)
   ============================================================ */
.cpa-panel .pewc-item-checkbox label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    cursor: pointer;
}

.cpa-panel .pewc-item-checkbox input[type=checkbox],
.cpa-optout input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #999;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}

.cpa-panel .pewc-item-checkbox input[type=checkbox]:checked,
.cpa-optout input[type=checkbox]:checked {
    border-color: #111;
}

.cpa-panel .pewc-item-checkbox input[type=checkbox]:checked::after,
.cpa-optout input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #111;
}

.cpa-panel .pewc-item-checkbox label > span:not(.pewc-theme-element) {
    flex: 1;
    font-size: 15px;
    color: #1a1a1a;
}

.cpa-panel .pewc-item-checkbox .required {
    display: none;
}

/* ============================================================
   PEWC radio-button-group rows (Installation, Accessory Kit)
   These are <li> items inside .pewc-checkbox-group-wrapper, each containing
   a <label.pewc-radio-form-label> with a real <input type=radio> and a
   <span.pewc-radio-option-text> label.
   ============================================================ */

.cpa-panel .pewc-checkbox-group-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpa-panel .pewc-checkbox-group-wrapper > li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    margin: 0;
    list-style: none;
    cursor: pointer;
    /* Collapse stray text nodes (the &nbsp; PEWC outputs between input and label) */
    font-size: 0;
}

.cpa-panel .pewc-checkbox-group-wrapper > li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* The label itself is inline-flex so it sits next to the price, not on its own row. */
.cpa-panel .pewc-checkbox-group-wrapper .pewc-radio-form-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin: 0;
    cursor: pointer;
    line-height: 1.3;
    font-size: 15px; /* restore from font-size:0 on parent */
    min-width: 0;
}

/* Replace the native radio with a custom round indicator.
 * IMPORTANT: also overrides any earlier image-swatch rule that hides this input. */
.cpa-panel .pewc-checkbox-group-wrapper input[type=radio].pewc-radio-form-field {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #999;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    transition: border-color 0.15s ease;
}

.cpa-panel .pewc-checkbox-group-wrapper input[type=radio].pewc-radio-form-field:checked {
    border-color: var(--oil, #111);
}

.cpa-panel .pewc-checkbox-group-wrapper input[type=radio].pewc-radio-form-field:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--oil, #111);
}

.cpa-panel .pewc-checkbox-group-wrapper .pewc-radio-option-text {
    flex: 1;
    font-size: 15px;
    color: var(--oil, #1a1a1a);
    min-width: 0;
}

.cpa-panel .pewc-checkbox-group-wrapper .pewc-radio-option-text .required {
    display: none;
}

/* Hide the in-label price spans (we move them to the right of the row) */
.cpa-panel .pewc-checkbox-group-wrapper .pewc-radio-option-text .cpa-hide-native-price {
    display: none !important;
}

/* PEWC's empty checkmark overlay span — hide so it doesn't add stray dots/space */
.cpa-panel .pewc-checkbox-group-wrapper .pewc-theme-element {
    display: none;
}

/* The injected (+N) sits as a sibling of the label, pushed to the row's right edge */
.cpa-panel .pewc-checkbox-group-wrapper > li > .cpa-row-price {
    margin-left: auto;
    padding-left: 8px;
    font-size: 14px; /* restore from font-size:0 on parent */
}

/* Hide the empty <h4> wrapper PEWC renders for radio groups with no label */
.cpa-panel .pewc-item-radio > .pewc-item-field-wrapper > h4.pewc-field-label:empty,
.cpa-panel .pewc-item-radio > .pewc-item-field-wrapper > h4.pewc-field-label .pewc-field-label-text:empty {
    display: none;
}
.cpa-panel .pewc-item-radio > .pewc-item-field-wrapper > h4.pewc-field-label {
    display: none; /* group label is in the panel header already */
}

/* ============================================================
   Option Info: eye icon + modal
   ============================================================ */
.cpa-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0 0 0 6px;
    border: 0;
    background: transparent;
    color: var(--primary, #294C3D);
    cursor: pointer;
    vertical-align: middle;
    border-radius: 50%;
    transition: background 0.15s ease, transform 0.15s ease;
    flex: 0 0 auto;
    line-height: 0;
}

.cpa-info-icon:hover,
.cpa-info-icon:focus-visible {
    background: rgba(41, 76, 61, 0.1);
    transform: scale(1.08);
    outline: none;
}

.cpa-info-icon .cpa-info-icon-svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* When the icon sits on an image swatch, pin it to a corner instead */
.cpa-panel .pewc-radio-image-wrapper > .cpa-info-icon {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--snow, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    z-index: 6;
    margin: 0;
}

.cpa-panel .pewc-radio-image-wrapper > .cpa-info-icon .cpa-info-icon-svg {
    width: 14px;
    height: 14px;
}

/* ---- Modal ---- */
.cpa-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cpa-modal[hidden] {
    display: none;
}

.cpa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cpa-modal.is-open .cpa-modal-backdrop {
    opacity: 1;
}

.cpa-modal-dialog {
    position: relative;
    background: var(--snow, #fff);
    color: var(--oil, #1a1a1a);
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.cpa-modal.is-open .cpa-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.cpa-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--oil, #1a1a1a);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease;
    z-index: 2;
}

.cpa-modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ---- Layout ----
 * DOM order is: media, title, content.
 * Desktop WITH media: two columns — media spans the left, title+content stack right, 5rem gap.
 * Desktop WITHOUT media: single column, title then content.
 * Mobile: single column ordered title → media → content.
 */
.cpa-modal-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.cpa-modal.cpa-has-media .cpa-modal-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 5rem;
    row-gap: 14px;
    align-items: start;
}

/* Media occupies the left column, spanning the title + content rows */
.cpa-modal-media {
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
}

.cpa-modal-media[hidden] {
    display: none;
}

.cpa-modal-media img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* Title + content go in the right column when media is present */
.cpa-modal.cpa-has-media .cpa-modal-title {
    grid-column: 2;
    grid-row: 1;
}

.cpa-modal.cpa-has-media .cpa-modal-content {
    grid-column: 2;
    grid-row: 2;
}

.cpa-modal-title {
    font-family: 'source-serif-pro', serif;
    font-size: var(--h3, 28px);
    font-weight: 500;
    margin: 0 40px 0 0;
    line-height: 1.2;
}

.cpa-modal-content {
    font-size: 16px;
    line-height: 1.6;
}

.cpa-modal-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.cpa-modal-content > *:first-child {
    margin-top: 0;
}

.cpa-modal-content > *:last-child {
    margin-bottom: 0;
}

.cpa-modal-loading,
.cpa-modal-error {
    text-align: center;
    padding: 30px 0;
    color: #777;
}

/* Lock body scroll when modal open */
body.cpa-modal-open {
    overflow: hidden;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 600px) {
    .cpa-main-title { font-size: 24px; }
    .cpa-panel-header { padding: 22px 16px; }
    .cpa-panel-body { padding: 0 16px; }
    .cpa-panel.is-open .cpa-panel-body { padding: 0 16px 18px 16px; }

    /* Swatches: drop to 6 per row on phones to keep them tappable */
    .cpa-panel .pewc-radio-images-wrapper,
    .cpa-panel .pewc-radio-images-wrapper:not(.pewc-component-wrapper),
    .cpa-panel .pewc-radio-images-wrapper:not(.pewc-components-wrapper) {
        grid-template-columns: repeat(6, 56px);
        gap: 14px 12px;
    }
}

@media (max-width: 380px) {
    .cpa-panel .pewc-radio-images-wrapper,
    .cpa-panel .pewc-radio-images-wrapper:not(.pewc-component-wrapper),
    .cpa-panel .pewc-radio-images-wrapper:not(.pewc-components-wrapper) {
        grid-template-columns: repeat(5, 56px);
    }
}

@media (max-width: 600px) {
    .cpa-modal { padding: 12px; }
    .cpa-modal-dialog { padding: 24px 20px; max-height: 90vh; }
    .cpa-modal-title { font-size: 22px; margin-right: 36px; }

    /* Force single column, ordered: title → media → content,
     * regardless of whether media is present. */
    .cpa-modal.cpa-has-media .cpa-modal-layout,
    .cpa-modal-layout {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .cpa-modal-title   { order: 1; }
    .cpa-modal-media   { order: 2; }
    .cpa-modal-content { order: 3; }
}