/* Woodmart Single Product Layout Builder: Customers Also Bought block. */
.wdcab-layout-block {
    width: 100%;
    max-width: 100%;
}

/* Editor-only visual preview. Front-end product cards keep Woodmart native styling. */
.editor-styles-wrapper .wdcab-layout-editor-preview {
    box-sizing: border-box;
    width: 100%;
    padding: 18px;
    border: 1px solid #e7e7e7;
    border-radius: var(--lili-ui-radius, 9px);
    background: #fff;
    direction: rtl;
    font-family: inherit;
}

.editor-styles-wrapper .wdcab-layout-preview-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #202020;
    font-size: 15px;
    line-height: 1.6;
}

.editor-styles-wrapper .wdcab-layout-preview-head .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    color: #92278f;
}

.editor-styles-wrapper .wdcab-layout-preview-note {
    margin-bottom: 14px;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
}

.editor-styles-wrapper .wdcab-layout-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.editor-styles-wrapper .wdcab-layout-preview-card {
    min-width: 0;
    padding: 8px;
    border: 1px solid #ededed;
    border-radius: var(--lili-ui-radius, 9px);
    background: #fafafa;
}

.editor-styles-wrapper .wdcab-layout-preview-image {
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    border-radius: calc(var(--lili-ui-radius, 9px) - 2px);
    background: linear-gradient(100deg, #f0f0f0 20%, #fafafa 40%, #f0f0f0 60%);
    background-size: 200% 100%;
    animation: wdcab-preview-shimmer 1.5s linear infinite;
}

.editor-styles-wrapper .wdcab-layout-preview-line {
    height: 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: #e7e7e7;
}

.editor-styles-wrapper .wdcab-layout-preview-line-wide {
    width: 88%;
}

.editor-styles-wrapper .wdcab-layout-preview-line-short {
    width: 58%;
}

@keyframes wdcab-preview-shimmer {
    to {
        background-position-x: -200%;
    }
}

@media (max-width: 782px) {
    .editor-styles-wrapper .wdcab-layout-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}