@layer components {
    .admin-product-page {
        --product-panel-gap: clamp(1rem, 2vw, 1.5rem);
    }

    .product-main-panel,
    .product-management-section,
    .product-subform-panel {
        scroll-margin-top: calc(var(--header-height) + 2rem);
    }

    .product-main-panel {
        overflow: visible;
    }

    .product-subform-container {
        max-width: 1100px;
    }

    /* Parcours de création */
    .product-setup {
        margin-bottom: 1.25rem;
    }

    .product-setup__list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.65rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .product-setup__step {
        min-width: 0;
    }

    .product-setup__link {
        position: relative;
        display: grid;
        min-height: 118px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.7rem;
        padding: 0.9rem;
        border: 1px solid var(--border);
        border-radius: 18px;
        color: var(--text-soft);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        transition:
            transform 170ms ease,
            border-color 170ms ease,
            background-color 170ms ease;
    }

    a.product-setup__link:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
        background: var(--surface-hover);
    }

    .product-setup__step.is-active .product-setup__link {
        border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
        background:
            linear-gradient(
                145deg,
                color-mix(in srgb, var(--primary) 8%, var(--surface)),
                color-mix(in srgb, var(--violet) 7%, var(--surface))
            );
    }

    .product-setup__step.is-locked .product-setup__link {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .product-setup__number {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 11px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 0.78rem;
        font-weight: 900;
    }

    .product-setup__step.is-complete .product-setup__number {
        color: #ffffff;
        background: linear-gradient(135deg, var(--primary), var(--violet));
    }

    .product-setup__copy {
        min-width: 0;
    }

    .product-setup__copy strong,
    .product-setup__copy small {
        display: block;
    }

    .product-setup__copy strong {
        color: var(--text);
        font-size: 0.84rem;
        line-height: 1.25;
    }

    .product-setup__copy small {
        margin-top: 0.35rem;
        color: var(--text-muted);
        font-size: 0.7rem;
        line-height: 1.4;
    }

    .product-setup__count {
        display: grid;
        min-width: 24px;
        height: 24px;
        place-items: center;
        padding-inline: 0.35rem;
        border-radius: 999px;
        color: var(--text-soft);
        background: var(--surface-soft);
        font-size: 0.7rem;
        font-weight: 850;
    }

    /* Structure du formulaire principal */
    .admin-product-form {
        display: grid;
        gap: 1.25rem;
    }

    .product-form-section {
        padding: clamp(1rem, 3vw, 1.5rem);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-solid);
    }

    .product-form-section__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .product-form-section__header h2 {
        margin: 0.35rem 0 0;
        font-size: clamp(1.2rem, 3vw, 1.6rem);
    }

    .product-form-section__header p {
        max-width: 700px;
        margin-top: 0.45rem;
        color: var(--text-soft);
        font-size: 0.86rem;
    }

    .product-form-section__number,
    .product-section-kicker {
        color: var(--primary);
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .product-form-subsection {
        margin-top: 0.25rem;
        padding: 1rem;
        border: 1px dashed var(--border-strong);
        border-radius: 15px;
        background: color-mix(in srgb, var(--surface-soft) 80%, transparent);
    }

    .product-form-subsection h3 {
        margin: 0;
        font-size: 0.95rem;
    }

    .product-form-subsection > p {
        margin: 0.35rem 0 1rem;
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .admin-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem;
    }

    .admin-form-grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-product-form .form-field {
        display: grid;
        align-content: start;
        gap: 0.48rem;
        min-width: 0;
        margin: 0;
    }

    .admin-product-form .form-field > label,
    .admin-product-form .form-field > legend {
        display: block;
        margin: 0;
        color: var(--text);
        font-size: 0.84rem;
        font-weight: 780;
        line-height: 1.35;
    }

    .admin-product-form .form-help,
    .admin-product-form .form-text,
    .admin-product-form .help-text,
    .admin-product-form .form-field > small {
        display: block;
        margin: 0.15rem 0 0;
        color: var(--text-muted);
        font-size: 0.76rem;
        line-height: 1.5;
    }

    .admin-product-form .form-errors {
        margin-top: 0.2rem;
    }

    .admin-product-form .form-control {
        margin: 0;
    }

    .product-option-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.2rem;
    }

    .admin-product-form .checkbox--card {
        display: flex;
        min-height: 86px;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .admin-product-form .checkbox--card span {
        display: grid;
        gap: 0.25rem;
    }

    .admin-product-form .checkbox--card strong {
        color: var(--text);
        font-size: 0.86rem;
    }

    .admin-product-form .checkbox--card small {
        color: var(--text-muted);
        font-size: 0.75rem;
        line-height: 1.45;
    }



    .product-price-field > label::after {
        color: var(--text-muted);
        content: " (€)";
        font-weight: 700;
    }

    [data-max-quantity-field][hidden] {
        display: none !important;
    }

    /* Traductions */
    .product-translation-list {
        display: grid;
        gap: 0.8rem;
    }

    .product-translation {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface-soft);
    }

    .product-translation[open] {
        border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
        background: var(--surface-solid);
    }

    .product-translation > summary {
        display: flex;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.9rem 1rem;
        cursor: pointer;
        list-style: none;
    }

    .product-translation > summary::-webkit-details-marker {
        display: none;
    }

    .product-translation > summary span:first-child {
        display: grid;
        gap: 0.15rem;
    }

    .product-translation > summary strong {
        font-size: 0.9rem;
    }

    .product-translation > summary small {
        color: var(--text-muted);
        font-size: 0.7rem;
    }

    .product-translation__body {
        display: grid;
        gap: 1rem;
        padding: 0 1rem 1rem;
        border-top: 1px solid var(--border);
    }

    .product-translation__body > .form-field:first-child {
        margin-top: 1rem;
    }

    /* Champ fichier natif stylé */
    .product-file-field {
        padding: 1rem;
        border: 1px dashed var(--border-strong);
        border-radius: 16px;
        background: var(--surface-soft);
    }

    .product-file-input {
        width: 100%;
        min-height: 52px;
        padding: 0.45rem;
        border: 1px solid var(--border);
        border-radius: 13px;
        color: var(--text-soft);
        background: var(--surface-solid);
        cursor: pointer;
    }

    .product-file-input::file-selector-button {
        min-height: 38px;
        margin-inline-end: 0.8rem;
        padding: 0.65rem 0.9rem;
        border: 0;
        border-radius: 10px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        cursor: pointer;
        font: inherit;
        font-size: 0.8rem;
        font-weight: 800;
        transition: filter 160ms ease, transform 160ms ease;
    }

    .product-file-input:hover::file-selector-button {
        filter: brightness(1.08);
    }

    .product-file-selection {
        display: block;
        margin-top: 0.55rem;
        color: var(--primary);
        font-size: 0.76rem;
        font-weight: 760;
    }

    .product-current-file {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        margin-top: 1rem;
        padding: 0.8rem 0.9rem;
        border: 1px solid var(--border);
        border-radius: 13px;
        background: var(--surface-soft);
        font-size: 0.82rem;
    }

    .product-current-file span {
        color: var(--text-soft);
    }

    .product-current-image,
    .product-current-block-image img {
        display: block;
        width: min(100%, 520px);
        max-height: 360px;
        margin-bottom: 1rem;
        object-fit: contain;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface-soft);
    }

    /* Note et progression */
    .product-next-steps-note {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
        border-radius: 16px;
        background: linear-gradient(
            145deg,
            var(--primary-soft),
            var(--violet-soft)
        );
    }

    .product-next-steps-note p {
        margin-top: 0.4rem;
        color: var(--text-soft);
        font-size: 0.84rem;
    }

    .product-next-steps-note ol {
        display: grid;
        gap: 0.35rem;
        margin: 0.8rem 0 0;
        padding-inline-start: 1.25rem;
        color: var(--text-soft);
        font-size: 0.8rem;
    }

    .admin-form-actions--product {
        position: sticky;
        z-index: 8;
        bottom: 0.75rem;
    }

    /* Sections variants / images / description */
    .product-admin-sections {
        display: grid;
        gap: 1.25rem;
        margin-block: 1.25rem;
    }

    .product-management-section {
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .product-management-section.is-recommended {
        border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
        box-shadow:
            0 0 0 4px var(--primary-soft),
            var(--shadow);
    }

    .product-management-section .dashboard-panel__header > div p {
        margin-top: 0.35rem;
        color: var(--text-soft);
        font-size: 0.82rem;
    }

    .product-section-empty {
        display: grid;
        min-height: 240px;
        place-items: center;
        align-content: center;
        gap: 0.65rem;
        padding: 2rem;
        border: 1px dashed var(--border-strong);
        border-radius: 18px;
        text-align: center;
    }

    .product-section-empty__icon {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border-radius: 18px;
        color: var(--primary);
        background: linear-gradient(
            145deg,
            var(--primary-soft),
            var(--violet-soft)
        );
        font-size: 0.84rem;
        font-weight: 900;
    }

    .product-section-empty h3 {
        margin: 0.2rem 0 0;
        font-size: 1.05rem;
    }

    .product-section-empty p {
        max-width: 540px;
        color: var(--text-soft);
        font-size: 0.84rem;
    }

    .product-admin-item {
        scroll-margin-top: calc(var(--header-height) + 1rem);
    }

    .media-admin-card small {
        display: block;
        min-height: 1.2em;
        margin-top: 0.25rem;
        color: var(--text-muted);
        font-size: 0.72rem;
    }

    .media-admin-card .admin-page-card__actions {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.75rem;
    }

    /* Choix des blocs */
    .block-type-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .block-type-card {
        display: grid;
        min-height: 225px;
        align-content: start;
        gap: 0.75rem;
        padding: 1.2rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .block-type-card:hover {
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
        box-shadow: var(--shadow);
    }

    .block-type-card__visual {
        display: grid;
        width: 70px;
        height: 58px;
        place-items: center;
        border-radius: 15px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        font-size: 1rem;
        font-weight: 900;
    }

    .block-type-card strong {
        margin-top: 0.4rem;
        font-size: 1rem;
    }

    .block-type-card p {
        color: var(--text-soft);
        font-size: 0.8rem;
        line-height: 1.55;
    }

    .product-block-list {
        display: grid;
        gap: 0.8rem;
    }

    .product-block-admin-card {
        display: grid;
        grid-template-columns: auto 84px minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        padding: 0.9rem;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface-soft);
    }

    .product-block-admin-card__order {
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 900;
    }

    .product-block-admin-card__preview {
        display: grid;
        width: 84px;
        height: 64px;
        overflow: hidden;
        place-items: center;
        border-radius: 12px;
        color: var(--primary);
        background: linear-gradient(
            145deg,
            var(--primary-soft),
            var(--violet-soft)
        );
        font-weight: 900;
    }

    .product-block-admin-card__preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-block-admin-card__copy {
        min-width: 0;
    }

    .product-block-admin-card__copy h3 {
        margin: 0;
        font-size: 0.94rem;
    }

    .product-block-admin-card__copy p {
        overflow: hidden;
        margin-top: 0.3rem;
        color: var(--text-soft);
        font-size: 0.78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-readiness {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .product-readiness > div {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.9rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        color: var(--text-soft);
        background: var(--surface-soft);
        font-size: 0.8rem;
        font-weight: 750;
    }

    .product-readiness > div span {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border-radius: 9px;
        color: var(--danger);
        background: color-mix(in srgb, var(--danger) 10%, transparent);
        font-weight: 900;
    }

    .product-readiness > div.is-ready span {
        color: var(--success);
        background: color-mix(in srgb, var(--success) 12%, transparent);
    }

    .product-delete-form {
        display: flex;
        justify-content: flex-end;
        margin-top: 1rem;
    }

    /* Index */
    .product-index-card {
        grid-template-columns: 94px minmax(0, 1fr) auto;
    }

    .product-index-card__visual {
        display: grid;
        width: 94px;
        height: 74px;
        overflow: hidden;
        place-items: center;
        border-radius: 13px;
        color: var(--primary);
        background: linear-gradient(
            145deg,
            var(--primary-soft),
            var(--violet-soft)
        );
        font-weight: 900;
    }

    .product-index-card__visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-index-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-block: 0.55rem;
    }

    .product-index-card__meta span {
        padding: 0.26rem 0.46rem;
        border-radius: 999px;
        color: var(--text-muted);
        background: var(--surface);
        font-size: 0.68rem;
        font-weight: 750;
    }

    /* Champs conditionnels de l'éditeur */
    [data-block-field][hidden] {
        display: none !important;
    }

    @media (max-width: 1120px) {
        .product-setup__list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .block-type-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 760px) {
        .product-setup__list,
        .admin-form-grid,
        .product-option-grid,
        .product-readiness,
        .block-type-grid {
            grid-template-columns: 1fr;
        }

        .product-setup__link {
            min-height: auto;
        }

        .product-block-admin-card {
            grid-template-columns: auto 70px minmax(0, 1fr);
        }

        .product-block-admin-card > .admin-page-card__actions {
            grid-column: 1 / -1;
            justify-content: stretch;
        }

        .product-block-admin-card > .admin-page-card__actions .btn,
        .product-block-admin-card > .admin-page-card__actions form,
        .product-block-admin-card > .admin-page-card__actions form .btn {
            width: 100%;
        }

        .product-index-card {
            grid-template-columns: 72px minmax(0, 1fr);
        }

        .product-index-card__visual {
            width: 72px;
            height: 64px;
        }

        .product-index-card > .admin-page-card__actions {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 520px) {
        .product-form-section,
        .product-translation__body {
            padding: 0.85rem;
        }

        .product-translation > summary {
            padding: 0.8rem;
        }

        .product-block-admin-card {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .product-block-admin-card__preview {
            width: 64px;
            height: 54px;
        }

        .product-block-admin-card__copy {
            grid-column: 2;
        }

        .product-delete-form .btn {
            width: 100%;
        }
    }
}

@layer components {
    .product-description-container {
        max-width: 1320px;
    }

    .product-description-page .product-description-editor-card,
    .product-description-page .product-description-image-upload-card,
    .product-description-page .product-description-library {
        margin-top: 1.25rem;
    }

    .product-description-form,
    .product-description-languages {
        display: grid;
        gap: 1rem;
    }

    .product-description-language {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--surface-soft);
    }

    .product-description-language[open] {
        border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
        background: var(--surface-solid);
        box-shadow: var(--shadow-sm);
    }

    .product-description-language > summary {
        display: flex;
        min-height: 62px;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.1rem;
        cursor: pointer;
        list-style: none;
    }

    .product-description-language > summary::-webkit-details-marker {
        display: none;
    }

    .product-description-language > summary span:first-child {
        display: grid;
        gap: 0.15rem;
    }

    .product-description-language > summary strong {
        font-size: 0.95rem;
    }

    .product-description-language > summary small {
        color: var(--text-muted);
        font-size: 0.72rem;
    }

    .product-description-language__body {
        display: grid;
        gap: 1rem;
        padding: 1rem;
        border-top: 1px solid var(--border);
    }

    .product-description-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        padding: 0.65rem;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: var(--surface-soft);
    }

    .product-description-write-area {
        display: grid;
        gap: 0.45rem;
    }

    .product-description-textarea {
        min-height: 520px;
        resize: vertical;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: 0.9rem;
        line-height: 1.65;
        tab-size: 4;
    }

    .product-description-help {
        display: grid;
        gap: 0.25rem;
        padding: 0.9rem 1rem;
        border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
        border-radius: 14px;
        color: var(--text-soft);
        background: linear-gradient(145deg, var(--primary-soft), var(--violet-soft));
        font-size: 0.8rem;
    }

    .product-description-help strong {
        color: var(--text);
    }

    .product-description-upload-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 1rem;
    }

    .product-description-image-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .product-description-image-card {
        display: grid;
        align-content: start;
        gap: 0.85rem;
        overflow: hidden;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--surface-soft);
        box-shadow: var(--shadow-sm);
    }

    .product-description-image-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .product-description-image-card__top code {
        overflow: hidden;
        padding: 0.3rem 0.45rem;
        border-radius: 8px;
        color: var(--violet);
        background: var(--violet-soft);
        font-size: 0.7rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-description-image-card > img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface-solid);
    }

    .product-description-image-card__shortcuts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .product-description-image-card__translations {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface-solid);
    }

    .product-description-image-card__translations > summary {
        padding: 0.75rem 0.85rem;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 800;
        list-style: none;
    }

    .product-description-image-card__translations > summary::-webkit-details-marker {
        display: none;
    }

    .product-description-image-card__translations > div {
        display: grid;
        gap: 0.8rem;
        padding: 0 0.85rem 0.85rem;
    }

    .product-description-image-card fieldset {
        display: grid;
        gap: 0.45rem;
        margin: 0;
        padding: 0.8rem;
        border: 1px solid var(--border);
        border-radius: 12px;
    }

    .product-description-image-card legend {
        padding-inline: 0.35rem;
        color: var(--primary);
        font-size: 0.72rem;
        font-weight: 850;
    }

    .product-description-image-card label {
        margin-top: 0.25rem;
        font-size: 0.76rem;
        font-weight: 760;
    }

    .product-description-summary {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
        border-radius: 18px;
        background: linear-gradient(145deg, var(--primary-soft), var(--violet-soft));
    }

    .product-description-summary__icon {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border-radius: 17px;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        font-weight: 900;
    }

    .product-description-summary__copy {
        min-width: 0;
    }

    .product-description-summary__copy h3 {
        margin: 0;
        font-size: 1rem;
    }

    .product-description-summary__copy p {
        overflow: hidden;
        margin-top: 0.35rem;
        color: var(--text-soft);
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-description-summary__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.65rem;
    }

    .product-description-summary__meta span {
        padding: 0.28rem 0.48rem;
        border-radius: 999px;
        color: var(--text-muted);
        background: var(--surface);
        font-size: 0.7rem;
        font-weight: 760;
    }

    .product-description-modal-backdrop,
    .product-description-preview-backdrop {
        position: fixed;
        z-index: 120;
        inset: 0;
        background: rgba(14, 5, 10, 0.58);
        backdrop-filter: blur(5px);
    }

    .product-description-modal {
        position: fixed;
        z-index: 130;
        inset: 0;
        display: none;
        place-items: center;
        padding: 1rem;
    }

    .product-description-modal.is-open {
        display: grid;
    }

    .product-description-modal__box {
        width: min(100%, 680px);
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface-solid);
        box-shadow: var(--shadow-lg);
    }

    .product-description-modal__head,
    .product-description-preview__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .product-description-modal__body {
        display: grid;
        gap: 0.55rem;
        padding: 1rem;
    }

    .product-description-modal__actions {
        display: flex;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid var(--border);
    }

    .product-description-preview {
        position: fixed;
        z-index: 130;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(760px, 94vw);
        overflow: auto;
        background: var(--surface-solid);
        box-shadow: var(--shadow-lg);
        transform: translateX(105%);
        transition: transform 220ms ease;
    }

    [dir="rtl"] .product-description-preview {
        right: auto;
        left: 0;
        transform: translateX(-105%);
    }

    .product-description-preview.is-open {
        transform: translateX(0);
    }

    .product-description-preview__head {
        position: sticky;
        z-index: 2;
        top: 0;
        background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
        backdrop-filter: blur(18px);
    }

    .product-description-preview__head > div {
        display: grid;
    }

    .product-description-preview__head span {
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    .product-description-preview__body {
        padding: clamp(1.25rem, 4vw, 3rem);
    }

    .product-description-preview__youtube {
        padding: 1rem;
        border: 1px dashed var(--border-strong);
        border-radius: 14px;
        color: var(--text-soft);
        background: var(--surface-soft);
    }

    body.has-product-editor-overlay {
        overflow: hidden;
    }

    @media (max-width: 1040px) {
        .product-description-image-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 760px) {
        .product-description-upload-form,
        .product-description-image-grid,
        .product-description-summary {
            grid-template-columns: 1fr;
        }

        .product-description-upload-form .btn,
        .product-description-summary > .btn {
            width: 100%;
        }

        .product-description-image-card__shortcuts {
            grid-template-columns: 1fr;
        }

        .product-description-textarea {
            min-height: 420px;
        }
    }
}


@layer components {
    .rich-image-upload-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .rich-theme-pair-option {
        min-height: 100%;
    }

    .rich-image-upload-grid [data-rich-dark-upload] {
        grid-column: 1 / -1;
    }

    .rich-image-theme-preview {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.85rem;
        background: var(--surface-soft);
    }

    .rich-image-theme-preview figure {
        display: grid;
        min-width: 0;
        gap: 0.45rem;
        margin: 0;
    }

    .rich-image-theme-preview figure > span {
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .rich-image-theme-preview img,
    .rich-image-theme-preview__fallback {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
    }

    .rich-image-theme-preview img {
        object-fit: cover;
    }

    .rich-image-theme-preview__fallback {
        display: grid;
        place-items: center;
        padding: 1rem;
        border: 1px dashed var(--border-strong);
        color: var(--text-muted);
        background: var(--surface-solid);
        font-size: 0.76rem;
        text-align: center;
    }

    .rich-image-insertion-controls {
        display: grid;
        gap: 0.65rem;
        padding: 0.9rem;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .rich-image-insertion-controls > label,
    .rich-dark-image-form > label {
        color: var(--text);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .rich-dark-image-form {
        display: grid;
        gap: 0.65rem;
        padding: 0.9rem;
        border-top: 1px solid var(--border);
    }

    .rich-dark-image-form .product-file-input {
        min-height: 46px;
    }

    @media (max-width: 700px) {
        .rich-image-upload-grid,
        .rich-image-theme-preview {
            grid-template-columns: 1fr;
        }
    }
}

/* =========================================================
   IMAGES COMPLÉMENTAIRES DES VARIANTES
   ========================================================= */
@layer components {
    .variant-gallery-admin-section {
        display: grid;
        gap: 1rem;
        margin-top: 0.25rem;
        padding: clamp(1rem, 3vw, 1.4rem);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--primary-soft) 45%, var(--surface-solid)),
            color-mix(in srgb, var(--violet-soft) 38%, var(--surface-solid))
        );
    }

    .variant-gallery-admin-section__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .variant-gallery-admin-section__header h2 {
        margin-top: 0.3rem;
        font-size: clamp(1.1rem, 3vw, 1.45rem);
    }

    .variant-gallery-admin-section__header p {
        max-width: 720px;
        margin-top: 0.4rem;
        color: var(--text-soft);
        font-size: 0.84rem;
    }

    .variant-gallery-admin-section__limit {
        flex: 0 0 auto;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 0.72rem;
        font-weight: 850;
    }

    .variant-gallery-admin-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .variant-gallery-admin-card {
        display: grid;
        grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--surface-solid);
        box-shadow: var(--shadow-sm);
    }

    .variant-gallery-admin-card__preview {
        display: grid;
        min-height: 260px;
        aspect-ratio: 1 / 1;
        place-items: center;
        overflow: hidden;
        color: var(--primary);
        background:
            radial-gradient(circle at 50% 40%, var(--primary-soft), transparent 46%),
            var(--surface-soft);
        font-size: 2rem;
        font-weight: 900;
    }

    .variant-gallery-admin-card__preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .variant-gallery-admin-card__body {
        display: grid;
        align-content: start;
        gap: 0.8rem;
        padding: 1rem;
    }

    .variant-gallery-admin-card__body h3 {
        margin: 0;
        font-size: 1rem;
    }

    .variant-gallery-admin-card__body > p {
        color: var(--text-soft);
        font-size: 0.8rem;
    }

    .variant-gallery-upload-field {
        padding: 0.8rem;
    }

    .variant-gallery-remove-option {
        min-height: auto !important;
        border-color: color-mix(in srgb, var(--danger) 25%, var(--border)) !important;
        background: color-mix(in srgb, var(--danger) 7%, var(--surface-soft)) !important;
    }

    @media (max-width: 980px) {
        .variant-gallery-admin-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 620px) {
        .variant-gallery-admin-section__header {
            flex-direction: column;
        }

        .variant-gallery-admin-card {
            grid-template-columns: 1fr;
        }

        .variant-gallery-admin-card__preview {
            min-height: auto;
            max-height: 360px;
        }
    }
}

@layer components {
    .product-description-preview .product-rich-box {
        display: grid;
        gap: 1rem;
        margin-block: 1.75rem;
        padding: 1.25rem;
        border: 1px solid color-mix(
            in srgb,
            var(--primary) 28%,
            var(--border)
        );
        border-inline-start: 4px solid var(--primary);
        border-radius: 16px;
        background:
            linear-gradient(
                145deg,
                var(--primary-soft),
                var(--violet-soft)
            );
    }

    .product-description-preview .product-rich-spacer--sm {
        height: 1rem;
    }

    .product-description-preview .product-rich-spacer--md {
        height: 2rem;
    }

    .product-description-preview .product-rich-spacer--lg {
        height: 3.5rem;
    }

    .product-description-preview .product-rich-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        margin-block: 1.5rem;
        padding: 0;
        list-style: none;
    }

    .product-description-preview .product-rich-tags__item {
        padding: 0.45rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface-soft);
        font-size: 0.78rem;
        font-weight: 760;
    }
}