/*
Theme Name: Imkerij DreLou
Theme URI: https://imkerijdrelou.nl
Description: Custom theme voor Imkerij DreLou - ambachtelijke honing uit Lelystad
Author: KECIAI
Author URI: https://keciai.nl
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: drelou
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
    --drelou-gold: #CC7A22;
    --drelou-gold-light: #DDA040;
    --drelou-gold-dark: #A86B1D;
    --drelou-green: #2D5016;
    --drelou-green-deep: #1A3009;
    --drelou-cream: #FFF8EE;
    --drelou-cream-dark: #F5EDDC;
    --drelou-ink: #1A1A1A;
    --drelou-ink-soft: #4A4A3A;
}

/* ============ GLOBAL ============ */
body {
    font-family: 'Lora', Georgia, serif !important;
    background: var(--drelou-cream) !important;
    color: var(--drelou-ink) !important;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif !important;
    color: var(--drelou-green-deep) !important;
}

a { color: var(--drelou-gold); }
a:hover { color: var(--drelou-gold-dark); }

/* ============ WOOCOMMERCE BUTTONS ============ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wp-element-button,
.wc-block-components-button {
    background-color: var(--drelou-gold) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.04em !important;
    padding: 0.8rem 2rem !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wp-element-button:hover,
.wc-block-components-button:hover {
    background-color: var(--drelou-gold-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(204, 122, 34, 0.3) !important;
}

/* ============ PRODUCT CARDS ============ */
.woocommerce ul.products li.product {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212, 160, 36, 0.1) !important;
    padding: 1rem !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 4px 20px rgba(139, 69, 19, 0.04) !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(139, 69, 19, 0.1) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.3rem !important;
    color: var(--drelou-green-deep) !important;
    font-weight: 600 !important;
}

.woocommerce ul.products li.product .price {
    color: var(--drelou-gold) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

.woocommerce ul.products li.product img {
    border-radius: 16px !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    overflow: hidden !important;
    border-radius: 16px !important;
    display: block !important;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.05) !important;
}

/* WooCommerce Blocks product grid */
.wc-block-components-product-image img,
.wc-block-components-product-image .attachment-woocommerce_thumbnail,
.wc-block-grid__product-image img,
.wc-block-product img {
    border-radius: 16px !important;
    aspect-ratio: 4/3 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.wc-block-components-product-image,
.wc-block-components-product-image__inner-container,
.wc-block-components-product-image__inner-container a {
    overflow: hidden !important;
    border-radius: 16px !important;
    display: block !important;
}

.wc-block-product:hover img {
    transform: scale(1.05) !important;
}

/* Sale badge */
.woocommerce span.onsale {
    background: var(--drelou-gold) !important;
    color: #fff !important;
    border-radius: 100px !important;
}

/* ============ SINGLE PRODUCT ============ */
.woocommerce div.product .product_title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.5rem !important;
    color: var(--drelou-green-deep) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--drelou-gold) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--drelou-gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--drelou-gold) !important;
}

/* ============ CART & CHECKOUT ============ */
.woocommerce table.shop_table {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(212, 160, 36, 0.1) !important;
}

.woocommerce table.shop_table th {
    background: var(--drelou-green-deep) !important;
    color: var(--drelou-cream) !important;
    font-family: 'Cormorant Garamond', serif !important;
}

.woocommerce-checkout #payment {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212, 160, 36, 0.1) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    border: 1px solid rgba(212, 160, 36, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.8rem 1rem !important;
    font-family: 'Lora', Georgia, serif !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--drelou-gold) !important;
    box-shadow: 0 0 0 2px rgba(204, 122, 34, 0.15) !important;
}

/* ============ BREADCRUMBS ============ */
.woocommerce .woocommerce-breadcrumb {
    color: var(--drelou-ink-soft) !important;
    font-size: 0.85rem !important;
}
.woocommerce .woocommerce-breadcrumb a {
    color: var(--drelou-gold) !important;
}

/* ============ PAGINATION ============ */
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--drelou-gold) !important;
    border-color: var(--drelou-gold) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* ============ MESSAGES ============ */
.woocommerce-message {
    border-top-color: var(--drelou-gold) !important;
}
.woocommerce-message::before {
    color: var(--drelou-gold) !important;
}

/* ============ STAR RATING ============ */
.woocommerce .star-rating span::before {
    color: var(--drelou-gold) !important;
}

/* ============ WIDGETS ============ */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background: var(--drelou-gold) !important;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    background: var(--drelou-gold-light) !important;
}

/* ============ PRODUCT IMAGE GALLERY ============ */
.woocommerce div.product div.images {
    cursor: zoom-in;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    transition: border-color 0.3s !important;
    cursor: pointer !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: var(--drelou-gold) !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    border-radius: 12px !important;
}

/* ============ QUANTITY ============ */
.woocommerce .quantity .qty {
    border-radius: 8px !important;
    border: 1px solid rgba(212, 160, 36, 0.2) !important;
}

/* ============ CATEGORY FILTER ============ */
.drelou-cat-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    justify-content: center !important;
    margin: 0 auto 2rem !important;
    padding: 0 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(212, 160, 36, 0.1) !important;
    list-style: none !important;
    width: 100% !important;
}

.drelou-cat-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    background: #fff !important;
    color: var(--drelou-ink-soft) !important;
    border: 1.5px solid rgba(212, 160, 36, 0.2) !important;
    border-radius: 100px !important;
    padding: 0.6rem 1.5rem !important;
    margin: 0 !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.04) !important;
}

.drelou-cat-btn:hover {
    border-color: var(--drelou-gold) !important;
    color: var(--drelou-gold-dark) !important;
    box-shadow: 0 2px 10px rgba(204, 122, 34, 0.1) !important;
}

.drelou-cat-btn.active {
    background: var(--drelou-gold) !important;
    color: #fff !important;
    border-color: var(--drelou-gold) !important;
}

.drelou-cat-btn.active:hover {
    background: var(--drelou-gold-dark) !important;
}

.drelou-cat-count {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 100px;
    font-weight: 600;
}

.drelou-cat-btn.active .drelou-cat-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ============ VARIABLE PRODUCT PRICE ============ */
.woocommerce ul.products li.product .price .price-prefix {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: var(--drelou-ink-soft) !important;
}

/* Hide duplicate price range text */
.woocommerce div.product .woocommerce-variation-price .price del,
.woocommerce div.product p.price .woocommerce-Price-amount:not(:first-child) {
    /* Keep variation price clean */
}

/* Variation dropdown styling */
.woocommerce div.product .variations select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    border: 1.5px solid rgba(212, 160, 36, 0.25) !important;
    border-radius: 100px !important;
    padding: 0.7rem 2.5rem 0.7rem 1.2rem !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 0.95rem !important;
    color: var(--drelou-ink) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23CC7A22' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    min-width: 180px !important;
}

.woocommerce div.product .variations select:focus {
    outline: none !important;
    border-color: var(--drelou-gold) !important;
    box-shadow: 0 0 0 3px rgba(204, 122, 34, 0.15) !important;
}

.woocommerce div.product .variations label {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    color: var(--drelou-green-deep) !important;
    font-size: 1rem !important;
}

/* ============ SORTING DROPDOWN ============ */
.woocommerce-ordering select.orderby {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    border: 1.5px solid rgba(212, 160, 36, 0.25) !important;
    border-radius: 100px !important;
    padding: 0.65rem 2.8rem 0.65rem 1.4rem !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 0.88rem !important;
    color: var(--drelou-ink) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23CC7A22' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.2rem center !important;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.06) !important;
}

.woocommerce-ordering select.orderby:hover {
    border-color: var(--drelou-gold) !important;
    box-shadow: 0 4px 16px rgba(204, 122, 34, 0.12) !important;
}

.woocommerce-ordering select.orderby:focus {
    outline: none !important;
    border-color: var(--drelou-gold) !important;
    box-shadow: 0 0 0 3px rgba(204, 122, 34, 0.15) !important;
}

/* Result count */
.woocommerce-result-count {
    font-family: 'Lora', Georgia, serif !important;
    color: var(--drelou-ink-soft) !important;
    font-size: 0.88rem !important;
}

/* ============ MOBILE SHOP ============ */
@media (max-width: 768px) {
    /* Product grid: 2 kolommen op tablet, netter */
    .wc-block-product-template__responsive.columns-3,
    .wc-block-product-template__responsive.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
        padding: 0 0.8rem !important;
    }

    /* Product cards: compacter op mobiel */
    .wc-block-product,
    .woocommerce ul.products li.product {
        padding: 0.6rem !important;
    }

    /* Product titels kleiner */
    .wc-block-product a:not(:has(img)),
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    /* Prijs kleiner */
    .wc-block-components-product-price,
    .woocommerce ul.products li.product .price {
        font-size: 0.9rem !important;
    }

    /* Buttons compacter */
    .wc-block-product .wp-block-button__link,
    .wc-block-components-product-button .wp-element-button,
    .woocommerce ul.products li.product a.button {
        padding: 0.5rem 1rem !important;
        font-size: 0.72rem !important;
    }

    /* Geen hover beweging/animatie op mobiel - ALLES uit */
    .wc-block-product *,
    .woocommerce ul.products li.product *,
    .wc-block-product,
    .woocommerce ul.products li.product {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    .wc-block-product:hover,
    .wc-block-product:active,
    .wc-block-product:focus,
    .woocommerce ul.products li.product:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .wc-block-product:hover *,
    .wc-block-product:active *,
    .woocommerce ul.products li.product:hover * {
        transform: none !important;
        animation: none !important;
    }

    /* Foto's: aspect ratio behouden */
    .wc-block-components-product-image img,
    .woocommerce ul.products li.product img {
        border-radius: 12px !important;
        aspect-ratio: 4/3 !important;
    }
    .wc-block-components-product-image,
    .wc-block-components-product-image__inner-container,
    .wc-block-components-product-image__inner-container a {
        border-radius: 12px !important;
    }

    /* Categorie filter buttons: scrollbaar */
    .drelou-cat-filter {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 0 1rem 1rem !important;
        gap: 0.5rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .drelou-cat-filter::-webkit-scrollbar { display: none; }
    .drelou-cat-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.78rem !important;
        flex-shrink: 0 !important;
    }

    /* Sorteer dropdown + resultaat teller */
    .woocommerce-ordering select.orderby {
        font-size: 0.78rem !important;
        padding: 0.5rem 2.2rem 0.5rem 1rem !important;
    }
    .woocommerce-result-count {
        font-size: 0.78rem !important;
    }

    /* Single product pagina */
    .woocommerce div.product .product_title {
        font-size: 1.6rem !important;
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 1.1rem !important;
    }
    .woocommerce div.product .variations select {
        min-width: 140px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    /* Kleine telefoons: 1 kolom voor betere leesbaarheid */
    .wc-block-product-template__responsive.columns-3,
    .wc-block-product-template__responsive.columns-4 {
        grid-template-columns: 1fr !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    /* Foto's groter op 1-kolom layout */
    .wc-block-components-product-image img,
    .woocommerce ul.products li.product img {
        aspect-ratio: 3/2 !important;
    }

    /* Buttons volle breedte */
    .wc-block-product .wp-block-button__link,
    .wc-block-components-product-button .wp-element-button {
        width: 100% !important;
        text-align: center !important;
    }
}