/* KleurKompas — website preview component */

.palette-preview {
    --preview-primary: #3F4F3A;
    --preview-secondary: #E8D8BE;
    --preview-accent: #B96A4A;
    --preview-background: #FAF7F1;
    --preview-text: #252525;

    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--preview-background);
    color: var(--preview-text);
    font-size: 0.875rem;
}

.preview-hero {
    padding: var(--space-lg);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--preview-secondary) 35%, var(--preview-background)) 0%,
        var(--preview-background) 100%
    );
}

.preview-eyebrow {
    margin: 0 0 var(--space-xs);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--preview-accent);
}

.preview-title {
    margin: 0 0 var(--space-sm);
    font-size: 1.25rem;
    color: var(--preview-text);
}

.preview-text {
    margin: 0 0 var(--space-md);
    line-height: 1.5;
    color: color-mix(in srgb, var(--preview-text) 85%, transparent);
}

.preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
}

.preview-btn-primary {
    background-color: var(--preview-primary);
    color: #FFFFFF;
}

.preview-btn-secondary {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--preview-primary) 40%, var(--preview-text));
    color: var(--preview-primary);
}

.preview-btn-accent {
    background-color: var(--preview-accent);
    color: #FFFFFF;
}

.preview-card {
    margin: var(--space-md);
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-text) 12%, transparent);
    background-color: color-mix(in srgb, var(--preview-background) 70%, #FFFFFF);
}

.preview-card-media {
    height: 4.5rem;
    background: linear-gradient(
        135deg,
        var(--preview-secondary),
        color-mix(in srgb, var(--preview-accent) 40%, var(--preview-secondary))
    );
}

.preview-card-body {
    padding: var(--space-md);
}

.preview-badge {
    display: inline-block;
    margin-bottom: var(--space-xs);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background-color: var(--preview-accent);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 600;
}

.preview-card-title {
    margin: 0 0 var(--space-xs);
    font-size: 1rem;
    color: var(--preview-text);
}

.preview-card-text {
    margin: 0;
    line-height: 1.45;
    color: color-mix(in srgb, var(--preview-text) 80%, transparent);
}

.preview-form {
    margin: 0 var(--space-md) var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--preview-secondary) 25%, var(--preview-background));
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
}

.preview-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--preview-text);
}

.preview-input {
    display: block;
    width: 100%;
    margin-bottom: var(--space-sm);
    padding: 0.5rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--preview-text) 20%, transparent);
    border-radius: var(--radius-sm);
    background-color: #FFFFFF;
    color: var(--preview-text);
    font: inherit;
}

.preview-form-submit {
    width: 100%;
}

.preview-cta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: 0 var(--space-md) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--preview-primary) 12%, var(--preview-background));
    border: 1px solid color-mix(in srgb, var(--preview-primary) 25%, transparent);
}

.preview-cta-content {
    flex: 1;
    min-width: 0;
}

.preview-cta-title {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--preview-text);
}

.preview-cta-text {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--preview-text) 72%, transparent);
}

.preview-footer {
    padding: var(--space-sm) var(--space-md);
    background-color: color-mix(in srgb, var(--preview-text) 88%, #000000);
    color: color-mix(in srgb, var(--preview-background) 90%, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.preview-footer-links {
    display: flex;
    gap: var(--space-md);
}

.preview-footer-links span {
    font-size: 0.6875rem;
    opacity: 0.72;
}

.preview-footer-copy {
    font-size: 0.6875rem;
    opacity: 0.55;
    white-space: nowrap;
}

/* Legacy: single-line footer text (used in older previews) */
.preview-footer-text {
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
    width: 100%;
}

/* ── Browser chrome ── */
.preview-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem var(--space-md);
    background-color: #EFEFEF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.preview-browser-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #C8C8C8;
    flex-shrink: 0;
}

.preview-browser-dot:nth-child(1) { background-color: #FF5F57; }
.preview-browser-dot:nth-child(2) { background-color: #FEBC2E; }
.preview-browser-dot:nth-child(3) { background-color: #28C840; }

.preview-browser-url {
    flex: 1;
    margin-left: var(--space-sm);
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.6875rem;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

/* ── Tab bar ── */
.preview-tab-bar {
    display: flex;
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 12%, transparent);
    background-color: color-mix(in srgb, var(--preview-background) 97%, var(--preview-primary));
}

.preview-tab-btn {
    flex: 1;
    padding: 0.55rem var(--space-sm);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--preview-text) 55%, transparent);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.preview-tab-btn.is-active {
    color: var(--preview-primary);
    border-bottom-color: var(--preview-primary);
    background-color: color-mix(in srgb, var(--preview-primary) 6%, transparent);
}

/* ── Scenes ── */
.preview-scene {
    min-height: 440px;
    overflow-y: auto;
}

/* ── Shared nav ── */
.preview-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.55rem var(--space-md);
    background-color: var(--preview-background);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
}

.preview-nav-logo {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--preview-primary);
    flex-shrink: 0;
    margin-right: var(--space-xs);
}

.preview-nav-links {
    display: flex;
    gap: var(--space-md);
    flex: 1;
}

.preview-nav-link {
    font-size: 0.725rem;
    color: color-mix(in srgb, var(--preview-text) 70%, transparent);
    white-space: nowrap;
}

.preview-nav-link--active {
    color: var(--preview-primary);
    font-weight: 600;
}

.preview-btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
}

/* ── Scene 1 – Marketing: 2-column card row ── */
.preview-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin: 0 var(--space-md) var(--space-md);
}

.preview-cards-row .preview-card {
    margin: 0;
}

.preview-card-media--alt {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--preview-primary) 40%, var(--preview-secondary)),
        color-mix(in srgb, var(--preview-primary) 65%, var(--preview-secondary))
    );
}

.preview-badge--primary {
    background-color: var(--preview-primary);
}

/* ── Scene 2 – Webshop ── */
.preview-shop-banner {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--preview-accent) 90%, #000000),
        color-mix(in srgb, var(--preview-accent) 65%, var(--preview-primary))
    );
}

.preview-eyebrow--light {
    color: rgba(255, 255, 255, 0.8);
}

.preview-title--light {
    color: #FFFFFF;
}

.preview-btn-light {
    background-color: #FFFFFF;
    color: var(--preview-accent);
    border-color: transparent;
}

.preview-btn-outline-light {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}

.preview-cart-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--preview-primary);
    flex-shrink: 0;
}

.preview-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--preview-background);
}

.preview-product-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-text) 12%, transparent);
    background-color: color-mix(in srgb, var(--preview-background) 60%, #FFFFFF);
}

.preview-product-img {
    height: 5.5rem;
    background: linear-gradient(
        135deg,
        var(--preview-secondary),
        color-mix(in srgb, var(--preview-primary) 25%, var(--preview-secondary))
    );
}

.preview-product-img--alt {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--preview-accent) 30%, var(--preview-secondary)),
        color-mix(in srgb, var(--preview-accent) 55%, var(--preview-secondary))
    );
}

.preview-product-img--alt2 {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--preview-primary) 45%, var(--preview-secondary)),
        var(--preview-primary)
    );
}

.preview-product-info {
    padding: var(--space-sm);
}

.preview-product-name {
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--preview-text);
    line-height: 1.3;
}

.preview-product-price-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.preview-product-price {
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--preview-primary);
}

.preview-product-old-price {
    font-size: 0.6875rem;
    color: color-mix(in srgb, var(--preview-text) 42%, transparent);
    text-decoration: line-through;
}

.preview-badge--sale {
    background-color: var(--preview-accent);
    font-size: 0.6rem;
}

.preview-btn-full {
    width: 100%;
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
}

/* ── Scene 3 – Blog ── */
.preview-article-header {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--preview-secondary) 30%, var(--preview-background)) 0%,
        var(--preview-background) 100%
    );
}

.preview-article-meta {
    margin: var(--space-xs) 0 0;
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--preview-text) 52%, transparent);
}

.preview-article-body {
    padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.preview-article-text {
    margin: 0 0 var(--space-sm);
    font-size: 0.8rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--preview-text) 85%, transparent);
}

.preview-quote {
    margin: var(--space-sm) 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--preview-accent);
    background-color: color-mix(in srgb, var(--preview-accent) 8%, var(--preview-background));
    font-style: italic;
    font-size: 0.825rem;
    color: var(--preview-text);
    line-height: 1.5;
}

.preview-related {
    padding: 0 var(--space-md) var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    margin-top: var(--space-xs);
}

.preview-related-title {
    margin: var(--space-md) 0 var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--preview-text);
}

.preview-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.preview-related-card {
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    background-color: color-mix(in srgb, var(--preview-background) 70%, #FFFFFF);
}

.preview-related-img {
    height: 4rem;
    background: linear-gradient(
        135deg,
        var(--preview-secondary),
        color-mix(in srgb, var(--preview-primary) 30%, var(--preview-secondary))
    );
}

.preview-related-img--alt {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--preview-accent) 25%, var(--preview-secondary)),
        color-mix(in srgb, var(--preview-accent) 50%, var(--preview-secondary))
    );
}

.preview-related-body {
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
}

.preview-related-tag {
    display: inline-block;
    margin-bottom: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--preview-accent) 15%, var(--preview-background));
    color: var(--preview-accent);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.preview-related-name {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--preview-text);
    line-height: 1.35;
}

/* ── Scene 1 extras: Features strip ── */
.preview-features {
    display: flex;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--preview-primary) 15%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-primary) 15%, transparent);
    background-color: color-mix(in srgb, var(--preview-primary) 6%, var(--preview-background));
}

.preview-feature {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem var(--space-sm);
    font-size: 0.7rem;
    color: var(--preview-text);
    border-right: 1px solid color-mix(in srgb, var(--preview-primary) 12%, transparent);
}

.preview-feature:last-child {
    border-right: none;
}

.preview-feature-icon {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background-color: var(--preview-primary);
    color: #FFFFFF;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.preview-feature-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--preview-text);
}

/* ── Scene 2 extras: Category pills ── */
.preview-categories {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    background-color: var(--preview-background);
}

.preview-category-pill {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--preview-text) 20%, transparent);
    color: color-mix(in srgb, var(--preview-text) 65%, transparent);
    background-color: transparent;
    white-space: nowrap;
}

.preview-category-pill--active {
    background-color: var(--preview-primary);
    border-color: var(--preview-primary);
    color: #FFFFFF;
}

/* ── Scene 2 extras: Featured product ── */
.preview-featured-product {
    display: flex;
    margin: 0 var(--space-md) var(--space-sm);
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-primary) 25%, transparent);
    background-color: color-mix(in srgb, var(--preview-primary) 5%, var(--preview-background));
}

.preview-featured-img {
    width: 5.5rem;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--preview-primary),
        color-mix(in srgb, var(--preview-primary) 65%, var(--preview-secondary))
    );
}

.preview-featured-info {
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.preview-featured-label {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--preview-accent);
}

.preview-featured-name {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--preview-text);
    line-height: 1.3;
}

/* ── Scene 2 extras: Shop newsletter ── */
.preview-shop-newsletter {
    margin: 0 var(--space-md) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--preview-secondary) 30%, var(--preview-background));
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
}

.preview-shop-newsletter-text {
    margin: 0 0 var(--space-xs);
    font-size: 0.725rem;
    color: color-mix(in srgb, var(--preview-text) 80%, transparent);
}

.preview-shop-newsletter-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.preview-input--inline {
    flex: 1;
    padding: 0.3rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--preview-text) 20%, transparent);
    border-radius: var(--radius-sm);
    background-color: #FFFFFF;
    color: color-mix(in srgb, var(--preview-text) 45%, transparent);
    font-size: 0.7rem;
}

/* ── Scene 3 extras: Article subheading ── */
.preview-article-subheading {
    margin: var(--space-sm) 0 var(--space-xs);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--preview-text);
}

/* ── Scene 3 extras: Tags strip ── */
.preview-tags {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: 0 var(--space-md) var(--space-sm);
}

/* ── Scene 3 extras: Author/subscribe CTA ── */
.preview-author-cta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 var(--space-md) var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--preview-secondary) 30%, var(--preview-background));
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
}

.preview-author-avatar {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--preview-primary),
        color-mix(in srgb, var(--preview-primary) 60%, var(--preview-secondary))
    );
}

.preview-author-info {
    flex: 1;
    min-width: 0;
}

.preview-author-name {
    margin: 0 0 0.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--preview-text);
}

.preview-author-desc {
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--preview-text) 60%, transparent);
}

/* ── Scene 1 extras: Stats block (Marketing) ── */
.preview-stats {
    display: flex;
    flex-shrink: 0;
    border-top: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    background-color: color-mix(in srgb, var(--preview-secondary) 20%, var(--preview-background));
}

.preview-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-xs);
    border-right: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    text-align: center;
}

.preview-stat:last-child {
    border-right: none;
}

.preview-stat-number {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--preview-primary);
    line-height: 1.2;
}

.preview-stat-label {
    font-size: 0.625rem;
    color: color-mix(in srgb, var(--preview-text) 58%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* ── Scene 2 extras: USP highlight bar (Webshop) ── */
.preview-usp-bar {
    display: flex;
    flex-shrink: 0;
    border-top: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    background-color: color-mix(in srgb, var(--preview-secondary) 20%, var(--preview-background));
}

.preview-usp-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem var(--space-xs);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--preview-text);
    border-right: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    text-align: center;
    line-height: 1.3;
}

.preview-usp-item:last-child {
    border-right: none;
}

.preview-usp-icon {
    flex-shrink: 0;
    color: var(--preview-primary);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Scene 2 extras: Shop banner subtitle ── */
.preview-shop-banner-text {
    margin: var(--space-xs) 0 var(--space-sm);
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* ── Scene 3: Blog intro (hero-style) ── */
.preview-blog-intro {
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--preview-secondary) 30%, var(--preview-background)) 0%,
        var(--preview-background) 100%
    );
    flex-shrink: 0;
}

/* ── Scene 3: Featured article card (Blog) ── */
.preview-featured-article {
    display: flex;
    margin: 0 var(--space-md) var(--space-sm);
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-text) 12%, transparent);
    background-color: color-mix(in srgb, var(--preview-background) 70%, #FFFFFF);
    flex-shrink: 0;
}

.preview-featured-article-img {
    width: 5rem;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--preview-secondary),
        color-mix(in srgb, var(--preview-accent) 35%, var(--preview-secondary))
    );
}

.preview-featured-article-body {
    padding: var(--space-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.preview-featured-article-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--preview-text);
    line-height: 1.3;
}

.preview-featured-article-text {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--preview-text) 70%, transparent);
    flex: 1;
}

/* ── Scene 3: Article list (Blog) ── */
.preview-article-list {
    margin: 0 var(--space-md) var(--space-sm);
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: color-mix(in srgb, var(--preview-background) 70%, #FFFFFF);
}

.preview-article-item {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 8%, transparent);
}

.preview-article-item:last-child {
    border-bottom: none;
}

.preview-article-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 0.2rem;
}

.preview-article-date {
    font-size: 0.6rem;
    color: color-mix(in srgb, var(--preview-text) 45%, transparent);
}

.preview-article-item-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--preview-text);
    line-height: 1.35;
}

/* ══════════════════════════════════════════
   Scene 1 — Services grid
══════════════════════════════════════════ */
.preview-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: color-mix(in srgb, var(--preview-secondary) 15%, var(--preview-background));
    border-top: 1px solid color-mix(in srgb, var(--preview-text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 8%, transparent);
}

.preview-service-card {
    padding: var(--space-sm);
    background-color: color-mix(in srgb, var(--preview-background) 70%, #FFFFFF);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
}

.preview-service-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
    background: linear-gradient(135deg,
        var(--preview-primary),
        color-mix(in srgb, var(--preview-primary) 65%, var(--preview-secondary))
    );
}

.preview-service-icon--alt {
    background: linear-gradient(135deg,
        var(--preview-secondary),
        color-mix(in srgb, var(--preview-primary) 30%, var(--preview-secondary))
    );
}

.preview-service-icon--accent {
    background: linear-gradient(135deg,
        var(--preview-accent),
        color-mix(in srgb, var(--preview-accent) 70%, var(--preview-primary))
    );
}

.preview-service-title {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--preview-text);
}

.preview-service-text {
    margin: 0;
    font-size: 0.675rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--preview-text) 68%, transparent);
}

/* ══════════════════════════════════════════
   Scene 1 — Testimonial
══════════════════════════════════════════ */
.preview-testimonial {
    margin: 0 var(--space-md) var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--preview-primary) 7%, var(--preview-background));
    border-left: 3px solid var(--preview-primary);
}

.preview-testimonial-text {
    margin: 0 0 var(--space-sm);
    font-size: 0.775rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--preview-text);
}

.preview-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.preview-testimonial-avatar {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--preview-primary),
        color-mix(in srgb, var(--preview-primary) 55%, var(--preview-secondary))
    );
}

.preview-testimonial-name {
    display: block;
    font-size: 0.725rem;
    font-weight: 700;
    color: var(--preview-text);
    line-height: 1.2;
}

.preview-testimonial-role {
    display: block;
    font-size: 0.625rem;
    color: color-mix(in srgb, var(--preview-text) 55%, transparent);
    margin-top: 0.1rem;
}

/* ══════════════════════════════════════════
   Scene 2 & 3 — Newsletter block
══════════════════════════════════════════ */
.preview-newsletter-block {
    margin: 0 var(--space-md) var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--preview-primary) 12%, var(--preview-background)),
        color-mix(in srgb, var(--preview-secondary) 35%, var(--preview-background))
    );
    border: 1px solid color-mix(in srgb, var(--preview-primary) 20%, transparent);
}

.preview-newsletter-title {
    margin: 0 0 0.2rem;
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--preview-text);
}

.preview-newsletter-text {
    margin: 0 0 var(--space-sm);
    font-size: 0.7rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--preview-text) 72%, transparent);
}

.preview-newsletter-form {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

/* ══════════════════════════════════════════
   Scene 2 — Webshop featured product desc
══════════════════════════════════════════ */
.preview-featured-desc {
    margin: 0;
    font-size: 0.675rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--preview-text) 65%, transparent);
}

/* ══════════════════════════════════════════
   Scene 2 — Payment icons
══════════════════════════════════════════ */
.preview-payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: var(--space-xs);
}

.preview-payment-icon {
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.575rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════
   Rich multi-column footer (all scenes)
══════════════════════════════════════════ */
.preview-footer--rich {
    display: block;
    padding: 0;
}

.preview-footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-sm);
}

.preview-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-footer-col--brand {
    gap: var(--space-xs);
}

.preview-footer-brand {
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.01em;
}

.preview-footer-tagline {
    margin: 0;
    font-size: 0.625rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.preview-footer-col-heading {
    margin: 0 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.45);
}

.preview-footer-col-link {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
}

.preview-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.38);
}

.preview-footer-bottom-links {
    display: flex;
    gap: var(--space-sm);
}

/* ══════════════════════════════════════════
   Scene 1 — Werkwijze / Process
══════════════════════════════════════════ */
.preview-process {
    padding: var(--space-md);
    background-color: color-mix(in srgb, var(--preview-secondary) 20%, var(--preview-background));
    border-top: 1px solid color-mix(in srgb, var(--preview-text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--preview-text) 8%, transparent);
}

.preview-process-label {
    margin: 0 0 var(--space-sm);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--preview-text) 48%, transparent);
}

.preview-process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.preview-process-step {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.preview-process-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--preview-primary) 35%, transparent);
    line-height: 1;
    flex-shrink: 0;
}

.preview-process-body {
    flex: 1;
}

.preview-process-title {
    margin: 0 0 0.2rem;
    font-size: 0.725rem;
    font-weight: 700;
    color: var(--preview-text);
}

.preview-process-text {
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--preview-text) 60%, transparent);
}

/* ══════════════════════════════════════════
   Scene 2 — Klantreviews
══════════════════════════════════════════ */
.preview-reviews {
    padding: var(--space-md);
    background-color: color-mix(in srgb, var(--preview-secondary) 12%, var(--preview-background));
    border-top: 1px solid color-mix(in srgb, var(--preview-text) 8%, transparent);
}

.preview-reviews-heading {
    margin: 0 0 var(--space-sm);
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--preview-text);
}

.preview-reviews-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.preview-review-card {
    padding: var(--space-sm);
    background-color: color-mix(in srgb, var(--preview-background) 65%, #FFFFFF);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
}

.preview-review-stars {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    color: var(--preview-accent);
    letter-spacing: 0.04em;
}

.preview-review-text {
    margin: 0 0 var(--space-xs);
    font-size: 0.675rem;
    font-style: italic;
    line-height: 1.5;
    color: color-mix(in srgb, var(--preview-text) 78%, transparent);
}

.preview-review-name {
    font-size: 0.625rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--preview-text) 52%, transparent);
}