/*
Theme Name: Marley Jolie (Storefront Child)
Theme URI: https://marleyjolie.nl
Description: Child-theme voor een gepersonaliseerde tassen- en accessoireswebshop, gebaseerd op het gratis Storefront-thema van WooCommerce.
Author: Tim
Template: storefront
Version: 1.0.0
Text Domain: marleyjolie
*/

/* ============================================
   HUISSTIJL — pas deze variabelen aan naar je
   eigen kleuren, lettertypes en merknaam
   ============================================ */
:root {
    --mj-kleur-primair: #c98ba0;       /* hoofdkleur, bv. voor knoppen en prijzen */
    --mj-kleur-primair-donker: #a96a80;
    --mj-kleur-accent: #f7ece9;        /* lichte achtergrondkleur voor vlakken */
    --mj-kleur-tekst: #2e2a28;
    --mj-lettertype-koppen: 'Playfair Display', Georgia, serif;
    --mj-lettertype-tekst: 'Poppins', Arial, sans-serif;
}

body {
    color: var(--mj-kleur-tekst);
    font-family: var(--mj-lettertype-tekst);
}

h1, h2, h3, h4, .site-title, .woocommerce-loop-product__title {
    font-family: var(--mj-lettertype-koppen);
    font-weight: 600;
}

/* Header */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--mj-kleur-accent);
}

.site-title a {
    color: var(--mj-kleur-tekst);
    letter-spacing: 1px;
}

/* Productoverzicht */
.woocommerce ul.products li.product .price {
    color: var(--mj-kleur-primair-donker);
    font-weight: 600;
}

.woocommerce ul.products li.product {
    text-align: center;
}

/* Knoppen */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
button.single_add_to_cart_button {
    background-color: var(--mj-kleur-primair) !important;
    border: none !important;
    border-radius: 30px !important;
    color: #fff !important;
    padding: 12px 28px !important;
    text-transform: none !important;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
button.single_add_to_cart_button:hover {
    background-color: var(--mj-kleur-primair-donker) !important;
}

/* ============================================
   PERSONALISATIEBLOK op de productpagina
   ============================================ */
.marleyjolie-personalisatie {
    background: var(--mj-kleur-accent);
    padding: 18px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.marleyjolie-personalisatie > p:first-child {
    margin-top: 0;
    font-weight: 600;
    color: var(--mj-kleur-primair-donker);
}

.marleyjolie-personalisatie label {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.marleyjolie-personalisatie .mj-naam-veld input,
.marleyjolie-personalisatie select {
    width: 100%;
    max-width: 320px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.marleyjolie-personalisatie .description {
    font-size: 0.85em;
    color: #6b6b6b;
}