/**
 * CSP-safe utility classes replacing common HTML style="…" patterns.
 * Loaded site-wide (admin + front) so style-src-attr can be denied.
 */

.cms-cursor-grab { cursor: grab; }
.cms-cursor-grabbing { cursor: grabbing; }
.cms-pre-wrap { white-space: pre-wrap; }
.cms-object-contain { object-fit: contain; }
.cms-scroll-y {
    max-height: 320px;
    overflow: auto;
}
.cms-scroll-y-sm {
    max-height: 200px;
    overflow: auto;
}
.cms-scroll-y-lg {
    max-height: 480px;
    overflow: auto;
}
.cms-mw-240 { max-width: 240px; }
.cms-mw-320 { max-width: 320px; }
.cms-mw-480 { max-width: 480px; }
.cms-mw-640 { max-width: 640px; }
.cms-mw-720 { max-width: 720px; }
.cms-mw-960 { max-width: 960px; }
.cms-w-0 { width: 0%; }
.cms-w-full { width: 100%; }
.cms-minw-8 { min-width: 8rem; }
.cms-minw-10 { min-width: 10rem; }
.cms-minw-12 { min-width: 12rem; }
.cms-h-2 { height: 2rem; }
.cms-h-3 { height: 3rem; }
.cms-h-4 { height: 4rem; }
.cms-w-2 { width: 2rem; }
.cms-w-3 { width: 3rem; }
.cms-w-4 { width: 4rem; }
.cms-w-5 { width: 5rem; }
.cms-w-6 { width: 6rem; }
.cms-w-8 { width: 8rem; }
.cms-w-10 { width: 10rem; }
.cms-w-12 { width: 12rem; }
.cms-w-16 { width: 16rem; }
.cms-w-20 { width: 20rem; }
.cms-w-24 { width: 24rem; }
.cms-w-32 { width: 32rem; }
.cms-w-40 { width: 40rem; }
.cms-w-48 { width: 48rem; }
.cms-bg-muted { background: #f1f5f9; }
.cms-bg-checker {
    object-fit: contain;
    background: #e2e8f0;
}

/* Width helpers for builder columns (px) */
.cms-w-px-40 { width: 40px; }
.cms-w-px-48 { width: 48px; }
.cms-w-px-60 { width: 60px; }
.cms-w-px-80 { width: 80px; }
.cms-w-px-100 { width: 100px; }
.cms-w-px-120 { width: 120px; }
.cms-w-px-140 { width: 140px; }
.cms-w-px-160 { width: 160px; }
.cms-w-px-180 { width: 180px; }
.cms-w-px-200 { width: 200px; }
.cms-w-px-220 { width: 220px; }
.cms-w-px-240 { width: 240px; }
.cms-w-px-280 { width: 280px; }
.cms-w-px-320 { width: 320px; }

/* Dynamic CSS variables via data-* (no style attr) */
[data-cms-swatch] {
    background-color: var(--cms-swatch, #ccc);
}
[data-pb-gallery-cols] {
    --pb-gallery-cols: attr(data-pb-gallery-cols type(<number>), 3);
}
/* attr() type() not universal — use explicit classes for gallery cols */
.pb-gallery-cols-1 { --pb-gallery-cols: 1; }
.pb-gallery-cols-2 { --pb-gallery-cols: 2; }
.pb-gallery-cols-3 { --pb-gallery-cols: 3; }
.pb-gallery-cols-4 { --pb-gallery-cols: 4; }
.pb-gallery-cols-5 { --pb-gallery-cols: 5; }
.pb-gallery-cols-6 { --pb-gallery-cols: 6; }

.pb-icon-box-align-start { --pb-icon-box-align: start; }
.pb-icon-box-align-center { --pb-icon-box-align: center; }
.pb-icon-box-align-end { --pb-icon-box-align: end; }

.pb-outline-depth-0 { --pb-outline-depth: 0rem; }
.pb-outline-depth-1 { --pb-outline-depth: 0.75rem; }
.pb-outline-depth-2 { --pb-outline-depth: 1.5rem; }
.pb-outline-depth-3 { --pb-outline-depth: 2.25rem; }
.pb-outline-depth-4 { --pb-outline-depth: 3rem; }
.pb-outline-depth-5 { --pb-outline-depth: 3.75rem; }
.pb-outline-depth-6 { --pb-outline-depth: 4.5rem; }
.pb-outline-depth-7 { --pb-outline-depth: 5.25rem; }
.pb-outline-depth-8 { --pb-outline-depth: 6rem; }

.cms-token-chip-color {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.cms-token-chip-size {
    display: inline-block;
    height: 0.4rem;
    max-width: 3rem;
    background: #64748b;
    border-radius: 2px;
}

[data-pb-form-progress-bar] {
    width: var(--pb-form-progress, 0%);
}

.cms-mw-180 { max-width: 180px; }
.cms-mw-200 { max-width: 200px; }
.cms-mw-220 { max-width: 220px; }
.cms-mw-280 { max-width: 280px; }
.cms-mh-180 { max-height: 180px; }
.cms-thumb-cover {
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
}
.cms-thumb-36 {
    object-fit: cover;
    width: 36px;
    height: 36px;
}
.cms-box-36 {
    width: 36px;
    height: 36px;
}
.cms-w-pct-5 { width: 5%; }
.cms-w-pct-16 { width: 16%; }
.cms-w-pct-20 { width: 20%; }
.cms-w-px-56 { width: 56px; }
.cms-w-px-70 { width: 70px; }
.cms-w-px-110 { width: 110px; }
.cms-w-px-130 { width: 130px; }
.cms-w-2_5 { width: 2.5rem; }
.cms-w-3_5 { width: 3.5rem; }
.cms-minw-7 { min-width: 7rem; }
.cms-minw-200px { min-width: 200px; }
.cms-mw-9rem { max-width: 9rem; }
.cms-mw-12rem { max-width: 12rem; }
.cms-mw-16rem { max-width: 16rem; }
.cms-modal-backdrop-z { z-index: 1990; }
.cms-h-px-1 { height: 1px; }
.cms-h-0_4 { height: 0.4rem; }
.cms-h-0_5 { height: 0.5rem; }
.cms-mt-2_5 { margin-top: 2.5rem; }
.cms-break-all { word-break: break-all; }
.cms-bg-checker-alt {
    object-fit: contain;
    background: #eef1f4;
}
.cms-opt-thumb {
    object-fit: contain;
    width: 40px;
    height: 40px;
    background: #eef1f4;
}
.cms-outline-pad {
    padding-left: calc(var(--pb-outline-depth, 0rem) + 1.75rem);
}
.cms-body-lock { overflow: hidden !important; }
.cms-toast-z { z-index: 1080; }