/* ============================================================================
   Wijnwolven-huisstijl voor de webshop-schermen (winkelwagen, checkout, account,
   login, bestellingen, productdetail). Deze pagina's zijn met Radzen-componenten
   gebouwd; hier koppelen we Radzen's thema-variabelen aan de tokens van de
   consumer-site (consumer.css + cms-theme.css) zodat webshop en website één
   geheel zijn. Geladen NA cms-theme.css, gescoped op .shop-layout.
   ============================================================================ */

.shop-layout {
    /* Typografie */
    --rz-text-font-family: var(--ff-body);
    --shop-font-body: var(--ff-body);
    --rz-text-title-color: var(--clr-text);
    --rz-text-h1-color: var(--clr-primary);
    --rz-text-h2-color: var(--clr-primary);
    --rz-text-h3-color: var(--clr-primary);
    --rz-text-h4-color: var(--clr-text);
    --rz-text-h5-color: var(--clr-text);
    --rz-text-h6-color: var(--clr-text);

    /* Kleuren */
    --rz-primary: var(--clr-primary);
    --rz-primary-light: var(--clr-primary-light);
    --rz-primary-lighter: #f3e6e8;
    --rz-primary-dark: var(--clr-primary-dark);
    --rz-primary-darker: var(--clr-primary-dark);
    --rz-secondary: var(--clr-cta);
    --rz-secondary-light: #33a064;
    --rz-secondary-lighter: #e3f3ea;
    --rz-secondary-dark: var(--clr-cta-hover);
    --rz-secondary-darker: #004f25;
    --rz-success: var(--clr-cta);
    --rz-success-dark: var(--clr-cta-hover);
    --rz-success-lighter: #e3f3ea;
    --rz-danger: #A31B34;
    --rz-danger-dark: #7C1428;
    --rz-warning: var(--clr-gold-dark);
    --rz-info: #6D6D6D;
    --rz-link-color: var(--clr-primary);
    --rz-link-hover-color: var(--clr-primary-dark);
    --rz-border-focus: var(--clr-primary);

    /* Vlakken */
    --rz-body-background-color: var(--clr-bg);
    --rz-base-background-color: var(--clr-surface);
    --rz-card-background-color: var(--clr-surface);
    --rz-card-border-radius: var(--radius-md, 12px);
    --rz-card-border: 1px solid var(--clr-border-light);
    --rz-card-shadow: 0 2px 8px rgba(26, 26, 26, 0.04);
    --rz-button-border-radius: 999px;
    --rz-input-border-radius: 8px;
    --rz-badge-border-radius: 999px;
    --rz-dialog-border-radius: 12px;
    --rz-form-field-label-focus-color: var(--clr-primary);
    --rz-input-focus-border: 1px solid var(--clr-primary);
    --rz-input-focus-shadow: 0 0 0 3px rgba(114, 47, 55, 0.12);
    --rz-steps-number-selected-background: var(--clr-primary);
    --rz-steps-title-selected-color: var(--clr-primary);
    --rz-selectbar-selected-background-color: var(--clr-primary);
    --rz-selectbar-selected-color: #fff;

    background-color: var(--clr-bg);
    color: var(--clr-text);
}

.shop-layout .shop-main { background-color: var(--clr-bg); }

/* Koppen in de serif van de website */
.shop-layout .rz-text-h1,
.shop-layout .rz-text-h2,
.shop-layout .rz-text-h3,
.shop-layout .rz-text-h4,
.shop-layout .rz-text-h5,
.shop-layout .rz-text-display-1,
.shop-layout .rz-dialog-title {
    font-family: var(--ff-heading);
    font-weight: 600;
    letter-spacing: 0;
}

/* Kaarten zoals de c-* kaarten op de site */
.shop-layout .rz-card {
    border: var(--rz-card-border);
    box-shadow: var(--rz-card-shadow);
}
.shop-layout .rz-card .rz-card { box-shadow: none; }
.shop-layout .rz-shadow-1, .shop-layout .rz-shadow-2, .shop-layout .rz-shadow-3 {
    box-shadow: 0 4px 16px rgba(26, 26, 26, 0.06) !important;
}

/* Knoppen: primair = wijnrood (site-CTA), succes/secundair = groen */
.shop-layout .rz-button {
    font-family: var(--ff-body);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.shop-layout .rz-button.rz-primary {
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
    color: #fff;
    border: 1px solid var(--clr-primary-dark);
}
.shop-layout .rz-button.rz-primary:not(.rz-state-disabled):hover {
    background: linear-gradient(135deg, var(--clr-primary-dark) 0%, #3d1820 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(114, 47, 55, 0.25);
}
.shop-layout .rz-button.rz-secondary,
.shop-layout .rz-button.rz-success {
    background: var(--clr-cta);
    color: #fff;
    border: 1px solid var(--clr-cta-hover);
}
.shop-layout .rz-button.rz-secondary:not(.rz-state-disabled):hover,
.shop-layout .rz-button.rz-success:not(.rz-state-disabled):hover {
    background: var(--clr-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 132, 61, 0.25);
}
.shop-layout .rz-button.rz-light {
    background: var(--clr-surface);
    color: var(--clr-text);
    border: 1.5px solid var(--clr-border);
}
.shop-layout .rz-button.rz-light:not(.rz-state-disabled):hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    background: var(--clr-surface);
}
.shop-layout .rz-button.rz-danger { background: #A31B34; color: #fff; }

/* Invoervelden */
.shop-layout .rz-textbox,
.shop-layout .rz-numeric input,
.shop-layout .rz-dropdown,
.shop-layout .rz-textarea,
.shop-layout .rz-datepicker input {
    font-family: var(--ff-body);
    background: var(--clr-surface);
}
.shop-layout .rz-form-field { --rz-form-field-label-color: var(--clr-text-secondary); }

/* Badges, alerts, steps */
.shop-layout .rz-badge { font-weight: 600; letter-spacing: .3px; }
.shop-layout .rz-alert { border-radius: 10px; }
.shop-layout .rz-steps .rz-steps-number { border-radius: 999px; }

/* Secundaire tekstkleur zoals op de site */
.shop-layout .rz-color-secondary { color: var(--clr-text-secondary) !important; }

/* Container-breedte gelijk aan de site */
.shop-layout .shop-container { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }


/* ============================================================================
   Header / paginakop / footer van de CMS-webshop in de wijnwolven.nl-stijl
   ============================================================================ */
.shop-layout .shop-c-header .c-container { gap: var(--sp-6); }
.shop-layout .c-nav-actions { display: flex; align-items: center; gap: var(--sp-4); }
.shop-layout .c-nav-link-muted { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,0.75); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }
.shop-layout .c-nav-link-muted:hover { color: #fff; }
.shop-layout .c-nav-links a.active { color: #fff; }
.shop-layout .c-nav-links a.active::after { width: 100%; }
.shop-layout .c-nav-mobile-only { display: none; }
.shop-layout .c-mobile-menu-btn { background: none; border: 0; cursor: pointer; }
.shop-layout .shop-header-cms { background: var(--clr-surface); border-bottom: 1px solid var(--clr-border-light); }

@media (max-width: 1024px) {
    .shop-layout .c-nav-link-muted span { display: none; }
}
@media (max-width: 768px) {
    .shop-layout .c-nav-link-muted { display: none; }
    .shop-layout .c-nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: #2D2226; padding: var(--sp-2) 0 var(--sp-4); box-shadow: 0 12px 24px rgba(0,0,0,.25); }
    .shop-layout .c-nav-links.is-open a { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-base); border-bottom: 1px solid rgba(255,255,255,0.06); }
    .shop-layout .c-nav-links.is-open a::after { display: none; }
    .shop-layout .c-nav-links.is-open .c-nav-mobile-only { display: block; color: rgba(255,255,255,0.6); }
}

/* Compacte hero als paginakop (CMS-pagina's) */
.shop-layout .c-hero--page { min-height: 0; background-size: cover; background-position: center; }
.shop-layout .c-hero--page .c-hero-bg { background: radial-gradient(ellipse at 20% 80%, rgba(163,27,52,0.35) 0%, transparent 60%), linear-gradient(135deg, #1a0f12 0%, #2D2226 60%, #3d1820 100%); }
.shop-layout .c-hero--page[style*="background-image"] .c-hero-bg { background: linear-gradient(to bottom, rgba(26,15,18,0.55), rgba(26,15,18,0.85)); }
.shop-layout .c-hero--page .c-hero-bg::after { height: 60px; }
.shop-layout .c-hero--page .c-container { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.shop-layout .c-hero--page h1 { font-size: var(--fs-4xl); animation: none; margin-bottom: 0; }
@media (max-width: 768px) {
    .shop-layout .c-hero--page .c-container { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
    .shop-layout .c-hero--page h1 { font-size: var(--fs-3xl); }
}

/* CMS-inhoud in de site-typografie */
.shop-layout .cms-page-content h1, .shop-layout .cms-page-content h2, .shop-layout .cms-page-content h3 { font-family: var(--ff-heading); color: var(--clr-text); }
.shop-layout .cms-page-content h2 { font-size: var(--fs-2xl); margin: var(--sp-8) 0 var(--sp-4); }
.shop-layout .cms-page-content p { color: var(--clr-text); line-height: 1.75; }
.shop-layout .cms-page-content a { color: var(--clr-primary); }
.shop-layout .cms-page { background: var(--clr-bg); }

/* Footer: contactblok */
.shop-layout .c-footer-contact { margin-top: var(--sp-4); font-size: var(--fs-sm); color: rgba(255,255,255,0.6); line-height: 1.8; }
.shop-layout .c-footer-contact a { color: rgba(255,255,255,0.75); }