.shop_attributes {
    margin-bottom: 0;
    overflow: hidden;
    --sd-attr-v-gap: 30px;
    --sd-attr-h-gap: 30px;
    --sd-attr-col: 1;
    --sd-attr-brd-width: 1px;
    --sd-attr-brd-style: solid;
    --sd-attr-brd-color: var(--brdcolor-gray-300);
    --sd-attr-img-width: 24px
}

.shop_attributes tbody {
    display: grid;
    grid-template-columns:repeat(var(--sd-attr-col), 1fr);
    margin-bottom: calc(-1 * (var(--sd-attr-v-gap) + var(--sd-attr-brd-width)));
    column-gap: var(--sd-attr-h-gap)
}

.shop_attributes tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(var(--sd-attr-v-gap) / 2);
    margin-bottom: calc(var(--sd-attr-v-gap) / 2);
    border-bottom: var(--sd-attr-brd-width) var(--sd-attr-brd-style) var(--sd-attr-brd-color)
}

.shop_attributes :is(th,td) {
    padding: 0;
    border: none
}

.shop_attributes th {
    flex: 0 0 auto;
    font-family: var(--sd-text-font);
    margin-left: 20px
}

.shop_attributes td {
    text-align: left
}

.shop_attributes p {
    margin-bottom: 0
}

.shop_attributes span {
    vertical-align: middle
}

.shop_attributes .sd-attr-img {
    width: 100vw;
    max-width: var(--sd-attr-img-width)
}

.shop_attributes .sd-attr-name:not(:first-child) {
    margin-inline-start: 10px
}

.shop_attributes .sd-hint {
    --sd-hint-bg: var(--bgcolor-gray-300);
    --sd-hint-color: var(--color-gray-800);
    --sd-hint-size: calc(var(--sd-text-font-size) - 3px);
    margin-inline-start: 2px
}