.table.content-wrapper {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;

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

    border: 1px solid var(--primaryBorder);
    border-radius: 24px;
    corner-shape: squircle;

    font-size: 14px;
    background-color: var(--bodyBackground);
}

.table.content {
    width: 100%;
    min-width: 760px;

    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.table.content tbody[hidden] {
    display: none;
}

#productsTableBody tr.row,
#productsTableBody tr.child-row,
#categoriesTableBody tr.row,
#categoriesTableBody tr.child-row,
#brandsTableBody tr.row {
    cursor: pointer;
}

#productsTableBody tr.row:hover,
#productsTableBody tr.child-row:hover,
#categoriesTableBody tr.row:hover,
#categoriesTableBody tr.child-row:hover,
#brandsTableBody tr.row:hover {
    background-color: color-mix(in srgb, var(--primaryAccent) 10%, transparent);
}

.table.content.brands-table {
    min-width: 320px;
}

.table.content.bulk-create-table {
    --bulk-selector-input-width: 240px;
    --bulk-selector-column-width: 264px;

    min-width: 1530px;
}

.table.content col.expand-column {
    width: 44px;
}

.table.content col.image-column {
    width: 112px;
}

.table.content col.brand-column {
    width: 180px;
}

.table.content col.line-column {
    width: auto;
}

.table.content col.category-name-column,
.table.content col.brand-name-column {
    width: auto;
}

.table.content col.unitcost-column {
    width: 124px;
}

.table.content col.price-column {
    width: 104px;
}

.table.content col.stock-count-column {
    width: 124px;
}

.table.content col.marketplace-submission-status-column {
    width: 176px;
}

.table.content col.bulk-type-column {
    width: 120px;
}

.table.content.bulk-create-table col.brand-column,
.table.content.bulk-create-table col.category-name-column {
    width: var(--bulk-selector-column-width);
}

.table.content col.bulk-description-column {
    width: 220px;
}

.table.content col.bulk-units-column {
    width: 116px;
}

.table.content th,
.table.content td {
    overflow: hidden;
    padding: 6px 12px;

    border-bottom: 1px solid var(--primaryBorder);

    text-align: left;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.table.content thead th {
    color: var(--secondaryText);
    background-color: var(--sectionBackground);

    font-size: 12px;
    font-weight: 400;
}

.table.content tbody th {
    font-weight: 400;
}

.table.content tbody .brand-column,
.table.content tbody .line-column,
.table.content tbody .category-name-column,
.table.content tbody .brand-name-column {
    font-weight: 700;
}

.table.content tbody .brand-column {
    color: var(--secondaryText);
}

.table.content tbody .unitcost-column,
.table.content tbody .price-column,
.table.content tbody .stock-count-column,
.table.content tbody .marketplace-submission-status-column {
    font-weight: 600;
}

.table.content tbody tr:last-child th,
.table.content tbody tr:last-child td {
    border-bottom: 0;
}

.table.content .row th,
.table.content .row td {
    height: 60px;
}

.table.content .child-row th,
.table.content .child-row td {
    height: 48px;
    font-size: 12px;

    opacity: 1;
    transition:
        height 240ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 240ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms ease,
        opacity 180ms ease;
}

.table.content .child-row th > *,
.table.content .child-row td > * {
    max-height: 80px;
    opacity: 1;
    transform: scaleY(1);
    transform-origin: center;
    transition:
        max-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease,
        padding 240ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.table.content .child-row.is-collapsed th,
.table.content .child-row.is-collapsed td {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    font-size: 0;
    line-height: 0;
    opacity: 0;
}

.table.content .child-row.is-collapsed th > *,
.table.content .child-row.is-collapsed td > * {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transform: scaleY(0);
}

.table.content .child-row.is-loading th,
.table.content .child-row.is-loading td {
    position: relative;
    color: transparent;
}

.table.content .child-row.is-loading th > *,
.table.content .child-row.is-loading td > * {
    opacity: 0;
}

.table.content .child-row.is-loading th::after,
.table.content .child-row.is-loading td::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;

    display: block;

    width: var(--child-skeleton-width, 52%);
    max-width: calc(100% - 24px);
    height: 12px;
    border-radius: 99px;

    background:
        linear-gradient(90deg,
            var(--sectionBackground) 0%,
            var(--sectionInsetBackground) 45%,
            var(--sectionBackground) 90%);
    background-size: 220% 100%;
    transform: translateY(-50%);
    animation: tableSkeletonShimmer 1200ms ease-in-out infinite;
}

.table.content .child-row.is-loading .expand-column::after,
.table.content .child-row.is-loading .brand-column::after {
    display: none;
}

.table.content .child-row.is-loading .image-column::after {
    left: 36px;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    corner-shape: squircle;
}

.table.content .child-row.is-loading .line-column::after,
.table.content .child-row.is-loading .category-name-column::after {
    --child-skeleton-width: 46%;
}

.table.content .child-row.is-loading .unitcost-column::after,
.table.content .child-row.is-loading .price-column::after,
.table.content .child-row.is-loading .stock-count-column::after,
.table.content .child-row.is-loading .marketplace-submission-status-column::after {
    right: 12px;
    left: auto;
    width: var(--child-skeleton-width, 58px);
}

.table.content .child-row.is-loading .marketplace-submission-status-column::after {
    width: 88px;
    height: 30px;
}

.table.content .child-row.is-collapsed th::after,
.table.content .child-row.is-collapsed td::after {
    display: none;
}

.table.content .expand-column {
    overflow: visible;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    text-overflow: clip;
}

.table.content .image-column {
    text-align: left;
}

.table.content thead .image-column {
    text-align: left;
}

.table.content .unitcost-column,
.table.content .price-column,
.table.content .stock-count-column,
.table.content .bulk-units-column,
.table.content .marketplace-submission-status-column {
    text-align: right;
}

.expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;

    color: var(--secondaryText);
    background: transparent;
    cursor: pointer;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.expand-toggle[aria-expanded="true"] {
    transform: rotate(0deg);
}

.expand-toggle[aria-disabled="true"] {
    cursor: default;
}

.expand-toggle svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}

.table.content-wrapper.is-loading {
    cursor: progress;
}

.table-skeleton-body {
    pointer-events: none;
}

.table-skeleton-row th,
.table-skeleton-row td {
    user-select: none;
}

.table-skeleton {
    display: block;

    width: var(--skeleton-width, 72%);
    max-width: 100%;
    height: 14px;
    border-radius: 99px;

    background:
        linear-gradient(90deg,
            var(--sectionBackground) 0%,
            var(--sectionInsetBackground) 45%,
            var(--sectionBackground) 90%);
    background-size: 220% 100%;
    animation: tableSkeletonShimmer 1200ms ease-in-out infinite;
}

.table-skeleton--toggle {
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border-radius: 6px;
}

.table-skeleton--image {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    corner-shape: squircle;
}

.table-skeleton--image.is-child {
    width: 36px;
    height: 36px;
    margin-left: 24px;
}

.table-skeleton--number {
    width: var(--skeleton-width, 64px);
    margin-left: auto;
}

.table-skeleton--pill {
    width: var(--skeleton-width, 112px);
    height: 30px;
    margin-left: auto;
}

.table.content .child-row .table-skeleton--text {
    height: 12px;
}

@keyframes tableSkeletonShimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .table.content .child-row th,
    .table.content .child-row td,
    .table.content .child-row th > *,
    .table.content .child-row td > *,
    .expand-toggle {
        transition: none;
    }

    .table-skeleton,
    .table.content .child-row.is-loading th::after,
    .table.content .child-row.is-loading td::after {
        animation: none;
    }
}

.product-image-placeholder {
    display: inline-block;

    width: 48px;
    height: 48px;

    background-color: var(--sectionBackground);
    border-radius: 24px;
    corner-shape: squircle;
    vertical-align: middle;
}

.product-image-placeholder.is-child {
    width: 36px;
    height: 36px;
    margin-left: 24px;
}

.product-image-thumb {
    display: inline-block;

    width: 48px;
    height: 48px;

    background-color: var(--sectionBackground);
    border-radius: 24px;
    corner-shape: squircle;
    object-fit: cover;
    vertical-align: middle;
}

.product-image-thumb.is-child {
    width: 36px;
    height: 36px;
    margin-left: 24px;
}

.table.content .child-row .price-column.inherited,
.table.content .child-row .unitcost-column.inherited,
.table.content .child-row .stock-count-column.inherited,
.table.content .child-row .category-name-column.inherited,
.table.content .child-row .line-column.inherited {
    color: var(--secondaryText);
}

.stock-count-value {
    padding: 7px 15px;
    border-radius: 99px;
    background-color: var(--sectionInsetBackground);
    color: var(--secondaryText);
}

.marketplace-submission-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 15px;
    border-radius: 99px;

    background-color: var(--sectionInsetBackground);
    color: var(--secondaryText);
}

.marketplace-submission-status.approved {
    background-color: var(--primaryConfirm);
    color: var(--tintConfirm);
}

.marketplace-submission-status.rejected {
    background-color: var(--primaryWarning);
    color: var(--tintWarning);
}

.bulk-create-form-wrapper {
    align-items: stretch;
}

.bulk-create-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
}

.bulk-create-table th,
.bulk-create-table td {
    padding: 8px 10px;
}

.bulk-create-table thead th {
    font-weight: 700;
}

.bulk-create-table .row th,
.bulk-create-table .row td {
    height: 64px;
}

.bulk-create-table .child-row th,
.bulk-create-table .child-row td {
    height: 56px;
}

.bulk-create-table .line-column {
    font-weight: 600;
}

.bulk-create-table .brand-column,
.bulk-create-table .category-name-column,
.bulk-create-table .bulk-description-column,
.bulk-create-table .bulk-units-column {
    color: var(--secondaryText);
    font-weight: 600;
}

.bulk-create-table .brand-column,
.bulk-create-table .category-name-column {
    overflow: visible;
    min-width: var(--bulk-selector-column-width);
}

.bulk-create-table .custom-select {
    position: relative;
    width: 100%;
    min-width: var(--bulk-selector-input-width);
}

.bulk-create-table .brand-column:focus-within,
.bulk-create-table .category-name-column:focus-within {
    position: relative;
    z-index: 2;
}

.bulk-table-input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;

    border: 1px solid var(--primaryBorder);
    border-radius: 12px;
    corner-shape: squircle;
    outline: none;

    background: var(--bodyBackground);
    color: var(--primaryAccent);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    transition: var(--primaryInteraction);
}

.bulk-table-input::placeholder {
    color: var(--secondaryText);
}

.bulk-table-input:focus {
    border-color: var(--primaryAccent);
    background: var(--sectionBackground);
    color: var(--focusText);
}

.bulk-table-input.money,
.bulk-table-input.number {
    text-align: right;
}

.bulk-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 80px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: 99px;

    font-size: 12px;
    font-weight: 700;
}

.bulk-type-pill.line {
    color: var(--primaryConfirm);
    background: color-mix(in srgb, var(--primaryConfirm) 14%, transparent);
}

.bulk-type-pill.variation {
    color: var(--primaryAccent);
    background: color-mix(in srgb, var(--primaryAccent) 14%, transparent);
}

.bulk-inherited-value {
    color: var(--secondaryText);
    font-size: 12px;
    font-weight: 600;
}

.bulk-image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;

    color: var(--secondaryText);
    background: transparent;
    cursor: pointer;
}

.bulk-image-button.is-child {
    width: 60px;
}

.bulk-image-button:hover .product-image-placeholder,
.bulk-image-button:focus-visible .product-image-placeholder {
    outline: 1px solid var(--primaryAccent);
    outline-offset: 2px;
}

.bulk-create-table-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    width: 100%;
}

.bulk-create-table-actions .toolbar.button {
    width: max-content;
}

.bulk-create-table-counts {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    margin: 0;
    color: var(--secondaryText);

    font-size: 12px;
    font-weight: 600;
}

.bulk-create-table-counts strong {
    color: var(--primaryText);
}

.bulk-create-table-status {
    width: 100%;
    min-height: 16px;
    margin: 0;
    color: var(--secondaryText);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 720px) {
    .bulk-create-table-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .bulk-create-table-counts {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}