/*
 * aqc-image-rounded — rounds AQC image widgets without touching templates.
 *
 * AQC image widgets render as:
 *   .image-w > .w (overflow:hidden, the clipping wrapper)
 *                 > .image (transform: scale(1.15), background-image)
 *
 * Putting border-radius on `.image` is invisible because `.image` is scaled
 * 15% outside `.w` and `.w` chops the rounded corners. This family provides
 * BOTH:
 *   1. A single-class rule per class-name (parser-eligible → creates the
 *      `CSSClass` Mongo row so `change_css_class` can save it).
 *   2. A custom-property bridge that routes wrapper-region values to `.w`.
 *   3. A `:has()` rule that routes the radius to `.w` (the actual clipper)
 *      whenever the class is on the inner `.image`.
 *
 * For non-AQC contexts (plain <img> or unwrapped .image) the single-class
 * rule applies directly.
 *
 * Values: 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 9999 (px). 9999 = pill/circle.
 * Breakpoints: base + sm/md/lg/xl/xxl (Bootstrap 5).
 */

[class*="aqc-image-rounded-"] .image-w > .w,
.image-w[class*="aqc-image-rounded-"] > .w,
.image-w > .w[class*="aqc-image-rounded-"] {
    border-radius: var(--aqc-image-rounded-radius, inherit) !important;
    overflow: hidden;
}

.aqc-image-rounded-0 { --aqc-image-rounded-radius: 0px; border-radius: 0px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-0) { border-radius: 0px !important; }

.aqc-image-rounded-2 { --aqc-image-rounded-radius: 2px; border-radius: 2px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-2) { border-radius: 2px !important; }

.aqc-image-rounded-4 { --aqc-image-rounded-radius: 4px; border-radius: 4px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-4) { border-radius: 4px !important; }

.aqc-image-rounded-6 { --aqc-image-rounded-radius: 6px; border-radius: 6px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-6) { border-radius: 6px !important; }

.aqc-image-rounded-8 { --aqc-image-rounded-radius: 8px; border-radius: 8px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-8) { border-radius: 8px !important; }

.aqc-image-rounded-12 { --aqc-image-rounded-radius: 12px; border-radius: 12px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-12) { border-radius: 12px !important; }

.aqc-image-rounded-16 { --aqc-image-rounded-radius: 16px; border-radius: 16px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-16) { border-radius: 16px !important; }

.aqc-image-rounded-20 { --aqc-image-rounded-radius: 20px; border-radius: 20px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-20) { border-radius: 20px !important; }

.aqc-image-rounded-24 { --aqc-image-rounded-radius: 24px; border-radius: 24px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-24) { border-radius: 24px !important; }

.aqc-image-rounded-32 { --aqc-image-rounded-radius: 32px; border-radius: 32px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-32) { border-radius: 32px !important; }

.aqc-image-rounded-9999 { --aqc-image-rounded-radius: 9999px; border-radius: 9999px !important; overflow: hidden; }
.image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-9999) { border-radius: 9999px !important; }


@media (min-width: 576px) {
    .aqc-image-rounded-sm-0 { --aqc-image-rounded-radius: 0px; border-radius: 0px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-0) { border-radius: 0px !important; }

    .aqc-image-rounded-sm-2 { --aqc-image-rounded-radius: 2px; border-radius: 2px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-2) { border-radius: 2px !important; }

    .aqc-image-rounded-sm-4 { --aqc-image-rounded-radius: 4px; border-radius: 4px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-4) { border-radius: 4px !important; }

    .aqc-image-rounded-sm-6 { --aqc-image-rounded-radius: 6px; border-radius: 6px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-6) { border-radius: 6px !important; }

    .aqc-image-rounded-sm-8 { --aqc-image-rounded-radius: 8px; border-radius: 8px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-8) { border-radius: 8px !important; }

    .aqc-image-rounded-sm-12 { --aqc-image-rounded-radius: 12px; border-radius: 12px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-12) { border-radius: 12px !important; }

    .aqc-image-rounded-sm-16 { --aqc-image-rounded-radius: 16px; border-radius: 16px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-16) { border-radius: 16px !important; }

    .aqc-image-rounded-sm-20 { --aqc-image-rounded-radius: 20px; border-radius: 20px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-20) { border-radius: 20px !important; }

    .aqc-image-rounded-sm-24 { --aqc-image-rounded-radius: 24px; border-radius: 24px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-24) { border-radius: 24px !important; }

    .aqc-image-rounded-sm-32 { --aqc-image-rounded-radius: 32px; border-radius: 32px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-32) { border-radius: 32px !important; }

    .aqc-image-rounded-sm-9999 { --aqc-image-rounded-radius: 9999px; border-radius: 9999px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-sm-9999) { border-radius: 9999px !important; }
}

@media (min-width: 768px) {
    .aqc-image-rounded-md-0 { --aqc-image-rounded-radius: 0px; border-radius: 0px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-0) { border-radius: 0px !important; }

    .aqc-image-rounded-md-2 { --aqc-image-rounded-radius: 2px; border-radius: 2px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-2) { border-radius: 2px !important; }

    .aqc-image-rounded-md-4 { --aqc-image-rounded-radius: 4px; border-radius: 4px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-4) { border-radius: 4px !important; }

    .aqc-image-rounded-md-6 { --aqc-image-rounded-radius: 6px; border-radius: 6px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-6) { border-radius: 6px !important; }

    .aqc-image-rounded-md-8 { --aqc-image-rounded-radius: 8px; border-radius: 8px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-8) { border-radius: 8px !important; }

    .aqc-image-rounded-md-12 { --aqc-image-rounded-radius: 12px; border-radius: 12px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-12) { border-radius: 12px !important; }

    .aqc-image-rounded-md-16 { --aqc-image-rounded-radius: 16px; border-radius: 16px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-16) { border-radius: 16px !important; }

    .aqc-image-rounded-md-20 { --aqc-image-rounded-radius: 20px; border-radius: 20px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-20) { border-radius: 20px !important; }

    .aqc-image-rounded-md-24 { --aqc-image-rounded-radius: 24px; border-radius: 24px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-24) { border-radius: 24px !important; }

    .aqc-image-rounded-md-32 { --aqc-image-rounded-radius: 32px; border-radius: 32px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-32) { border-radius: 32px !important; }

    .aqc-image-rounded-md-9999 { --aqc-image-rounded-radius: 9999px; border-radius: 9999px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-md-9999) { border-radius: 9999px !important; }
}

@media (min-width: 992px) {
    .aqc-image-rounded-lg-0 { --aqc-image-rounded-radius: 0px; border-radius: 0px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-0) { border-radius: 0px !important; }

    .aqc-image-rounded-lg-2 { --aqc-image-rounded-radius: 2px; border-radius: 2px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-2) { border-radius: 2px !important; }

    .aqc-image-rounded-lg-4 { --aqc-image-rounded-radius: 4px; border-radius: 4px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-4) { border-radius: 4px !important; }

    .aqc-image-rounded-lg-6 { --aqc-image-rounded-radius: 6px; border-radius: 6px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-6) { border-radius: 6px !important; }

    .aqc-image-rounded-lg-8 { --aqc-image-rounded-radius: 8px; border-radius: 8px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-8) { border-radius: 8px !important; }

    .aqc-image-rounded-lg-12 { --aqc-image-rounded-radius: 12px; border-radius: 12px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-12) { border-radius: 12px !important; }

    .aqc-image-rounded-lg-16 { --aqc-image-rounded-radius: 16px; border-radius: 16px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-16) { border-radius: 16px !important; }

    .aqc-image-rounded-lg-20 { --aqc-image-rounded-radius: 20px; border-radius: 20px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-20) { border-radius: 20px !important; }

    .aqc-image-rounded-lg-24 { --aqc-image-rounded-radius: 24px; border-radius: 24px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-24) { border-radius: 24px !important; }

    .aqc-image-rounded-lg-32 { --aqc-image-rounded-radius: 32px; border-radius: 32px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-32) { border-radius: 32px !important; }

    .aqc-image-rounded-lg-9999 { --aqc-image-rounded-radius: 9999px; border-radius: 9999px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-lg-9999) { border-radius: 9999px !important; }
}

@media (min-width: 1200px) {
    .aqc-image-rounded-xl-0 { --aqc-image-rounded-radius: 0px; border-radius: 0px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-0) { border-radius: 0px !important; }

    .aqc-image-rounded-xl-2 { --aqc-image-rounded-radius: 2px; border-radius: 2px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-2) { border-radius: 2px !important; }

    .aqc-image-rounded-xl-4 { --aqc-image-rounded-radius: 4px; border-radius: 4px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-4) { border-radius: 4px !important; }

    .aqc-image-rounded-xl-6 { --aqc-image-rounded-radius: 6px; border-radius: 6px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-6) { border-radius: 6px !important; }

    .aqc-image-rounded-xl-8 { --aqc-image-rounded-radius: 8px; border-radius: 8px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-8) { border-radius: 8px !important; }

    .aqc-image-rounded-xl-12 { --aqc-image-rounded-radius: 12px; border-radius: 12px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-12) { border-radius: 12px !important; }

    .aqc-image-rounded-xl-16 { --aqc-image-rounded-radius: 16px; border-radius: 16px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-16) { border-radius: 16px !important; }

    .aqc-image-rounded-xl-20 { --aqc-image-rounded-radius: 20px; border-radius: 20px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-20) { border-radius: 20px !important; }

    .aqc-image-rounded-xl-24 { --aqc-image-rounded-radius: 24px; border-radius: 24px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-24) { border-radius: 24px !important; }

    .aqc-image-rounded-xl-32 { --aqc-image-rounded-radius: 32px; border-radius: 32px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-32) { border-radius: 32px !important; }

    .aqc-image-rounded-xl-9999 { --aqc-image-rounded-radius: 9999px; border-radius: 9999px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xl-9999) { border-radius: 9999px !important; }
}

@media (min-width: 1400px) {
    .aqc-image-rounded-xxl-0 { --aqc-image-rounded-radius: 0px; border-radius: 0px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-0) { border-radius: 0px !important; }

    .aqc-image-rounded-xxl-2 { --aqc-image-rounded-radius: 2px; border-radius: 2px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-2) { border-radius: 2px !important; }

    .aqc-image-rounded-xxl-4 { --aqc-image-rounded-radius: 4px; border-radius: 4px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-4) { border-radius: 4px !important; }

    .aqc-image-rounded-xxl-6 { --aqc-image-rounded-radius: 6px; border-radius: 6px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-6) { border-radius: 6px !important; }

    .aqc-image-rounded-xxl-8 { --aqc-image-rounded-radius: 8px; border-radius: 8px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-8) { border-radius: 8px !important; }

    .aqc-image-rounded-xxl-12 { --aqc-image-rounded-radius: 12px; border-radius: 12px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-12) { border-radius: 12px !important; }

    .aqc-image-rounded-xxl-16 { --aqc-image-rounded-radius: 16px; border-radius: 16px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-16) { border-radius: 16px !important; }

    .aqc-image-rounded-xxl-20 { --aqc-image-rounded-radius: 20px; border-radius: 20px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-20) { border-radius: 20px !important; }

    .aqc-image-rounded-xxl-24 { --aqc-image-rounded-radius: 24px; border-radius: 24px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-24) { border-radius: 24px !important; }

    .aqc-image-rounded-xxl-32 { --aqc-image-rounded-radius: 32px; border-radius: 32px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-32) { border-radius: 32px !important; }

    .aqc-image-rounded-xxl-9999 { --aqc-image-rounded-radius: 9999px; border-radius: 9999px !important; overflow: hidden; }
    .image-w > .w:has(> [data-aqc-image-element].aqc-image-rounded-xxl-9999) { border-radius: 9999px !important; }
}