.size-guide-rich-content {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--theme-color-text);
    line-height: 1.9;
}

.size-guide-rich-content img,
.size-guide-rich-content video,
.size-guide-rich-content iframe {
    max-width: 100%;
}

.size-guide-rich-content table {
    width: 100%;
    margin-block: 1rem;
    overflow: hidden;
    border: 1px solid var(--theme-color-border);
    border-collapse: collapse;
    border-radius: .75rem;
}

.size-guide-rich-content th,
.size-guide-rich-content td {
    min-width: 5.5rem;
    padding: .7rem .85rem;
    border: 1px solid var(--theme-color-border);
    text-align: center;
    vertical-align: middle;
}

.size-guide-rich-content th {
    color: var(--theme-color-text);
    background: var(--theme-color-surface-raised);
    font-weight: 800;
}

.tiny-size-guide-action {
    display: flex;
    width: 100%;
    margin-block: 1rem;
}

.tiny-size-guide-action--center { justify-content: center; }
.tiny-size-guide-action--start { justify-content: flex-start; }
.tiny-size-guide-action--end { justify-content: flex-end; }
.tiny-size-guide-action--full .tiny-size-guide-button { width: 100%; }

.tiny-size-guide-button {
    display: inline-flex;
    min-height: 2.85rem;
    padding: .65rem 1.15rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-button-primary-background);
    border-radius: .75rem;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.tiny-size-guide-button--primary {
    color: var(--theme-button-primary-foreground);
    background: var(--theme-button-primary-background);
}

.tiny-size-guide-button--primary:hover,
.tiny-size-guide-button--primary:focus-visible {
    color: var(--theme-button-primary-hover-foreground);
    background: var(--theme-button-primary-hover-background);
    border-color: var(--theme-button-primary-hover-background);
}

.tiny-size-guide-button--outline {
    color: var(--theme-color-primary);
    background: var(--theme-color-surface);
}

.tiny-size-guide-button--outline:hover,
.tiny-size-guide-button--outline:focus-visible {
    color: var(--theme-button-primary-foreground);
    background: var(--theme-button-primary-background);
}

.tiny-size-guide-button:focus-visible {
    outline: 3px solid var(--theme-button-primary-focus-ring);
    outline-offset: 2px;
}

.tiny-size-guide-button:active {
    color: var(--theme-button-primary-active-foreground);
    background: var(--theme-button-primary-active-background);
    border-color: var(--theme-button-primary-active-background);
    transform: translateY(1px);
}

@media (max-width: 767.98px) {
    .size-guide-rich-content {
        overflow-x: auto;
    }

    .size-guide-rich-content table {
        font-size: .85rem;
    }

    .size-guide-rich-content th,
    .size-guide-rich-content td {
        padding: .55rem .6rem;
    }
}
