/**
 * Mi Toetie - Hoofd Stylesheet
 * 
 * Secties (zelfde nummering als live site):
 * 0  - Fonts
 * 1  - Globaal / Reset
 * 2  - Header
 * 3  - Navigatie
 * 4  - Homepage
 * 5  - Product Grid (loop)
 * 6  - Single Product
 * 7  - Winkelwagen
 * 8  - Checkout
 * 9  - Mijn Account
 * 10 - Footer
 * 11 - Labels & Badges
 * 12 - Knoppen
 * 13 - Formulieren
 * 14 - FacetWP (basis)
 * 15 - Algolia (basis)
 * 16 - Modals & Popups
 * 17 - USP Bar
 * 18 - Levertijd
 * 19 - Vacation
 * 20 - Landing Pages
 * 21 - Responsive
 * 22 - 404 Pagina
 */

/* ============================================
   0. FONTS
   ============================================ */

@font-face {
    font-display: swap;
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/figtree-v9-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/figtree-v9-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/figtree-v9-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/figtree-v9-latin-700.woff2') format('woff2');
}

body,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Figtree', sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ============================================
   1. GLOBAAL
   ============================================ */

:root {
    --mt-primary: #378A93;
    --mt-text: #4a4a4a;
    --mt-btn-hover: #60703c;
    --mt-pink: #b78d9e;
    --mt-green: #a7c7b7;
    --mt-sand: #dbbea0;
    --mt-bg-light: #f9f9f9;
    --mt-border: #e5e5e5;
}

/* ============================================
   11. LABELS & BADGES
   ============================================ */

.mt-product-labels {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mt-label {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 3px;
}

.mt-label-sale {
    background: var(--mt-primary);
    color: #fff;
}

.mt-label-handgemaakt {
    background: var(--mt-pink);
    color: #fff;
}

.mt-label-laatste {
    background: #e74c3c;
    color: #fff;
}

/* ============================================
   18. LEVERTIJD
   ============================================ */

.mt-levertijd {
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--mt-bg-light);
    border-radius: 4px;
    font-size: 14px;
    color: var(--mt-text);
}

.mt-levertijd-icon {
    margin-right: 4px;
}

.mt-opop {
    margin: 10px 0;
    padding: 8px 12px;
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    font-size: 13px;
    color: #856404;
}