/**
 * WebCreator Theme - Base Stylesheet
 * 
 * This is the base theme CSS with CSS custom properties for easy theming
 * Color variants override these variables
 * 
 * @package WebCreator\Client\Theme
 * @version 5.0.0
 */

/* ============================================
   Inter, hosted by the site itself (no request to Google Fonts: GDPR).
   The files are always published with the site (Build/ThemeAssets), so these addresses are never dead.
   Medium (500) uses the 400 file. Licence: themes/_fonts/licenses/inter-LICENSE.txt (SIL OFL 1.1)
   ============================================ */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/themes/_fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/themes/_fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/themes/_fonts/inter-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Inter Fallback: Arial with the metrics of Inter, so the text does not re-wrap when Inter arrives (ThemeFonts::fallbackFace("inter"), bin/font-metrics.js) */
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");size-adjust:93.5%;ascent-override:103.63%;descent-override:25.77%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");size-adjust:85.21%;ascent-override:113.71%;descent-override:28.28%;line-gap-override:0%}

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Colors - Primary (Clean Green / Nature) */
    --color-primary: #27ae60;
    --color-primary-dark: #219150;
    --color-primary-light: #a9dfbf;
    --color-primary-50: rgba(39, 174, 96, 0.1);
    /* Text on the main colour: white or dark, whichever has the higher contrast (WCAG). The theme builder sets
       these for its own primary colour (ThemeStyles); for this default green dark text is the readable one. */
    --wc-on-primary: #111111;
    --color-on-primary: #111111;
    --wc-on-primary-hover: #111111;
    /* The main colour as the colour of text on the page background (links, prices); the theme builder sets these too */
    --wc-primary-text: #1b7a43;   /* 4.5:1 on the page and on the 10% tint of the default green */
    --wc-primary-text-hover: #186a3a;

    /* ... */

    /* Colors - Neutral */
    --color-text: #1F2937;
    --color-text-muted: #4B5563;
    --color-text-light: #6B7280;
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-bg-tertiary: #F3F4F6;
    --color-border: #E5E7EB;
    --color-border-dark: #D1D5DB;

    /* Colors - Semantic */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* Typography */
    --font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: var(--font-family);

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Layout */
    --container-max: 1200px;
    --header-height: 70px;
}

/* ============================================
   CSS Reset
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--wc-primary-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--wc-primary-text-hover);
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

ul,
ol {
    list-style: none;
}

/* ============================================
   Accessibility
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-primary);
    color: var(--wc-on-primary);
    transition: top var(--transition-fast);
}

.skip-link:hover,
.skip-link:focus {
    background: var(--color-primary);
    color: var(--wc-on-primary);
}

.skip-link:focus {
    top: 0;
}

/* Focus ring (WCAG 1.4.11: at least 3:1 on the surface it is drawn on). The ring sits OUTSIDE the element (outline-offset > 0), so
   it is measured against the surface around the element: --wc-focus-ring on the page, -header on the header (top-level links, button,
   dropdown, mobile menu), -footer in the footer; the top bar uses its own text colour. ThemeStyles derives them; themes use them. */
:focus-visible {
    outline: 2px solid var(--wc-focus-ring, var(--wc-primary-text, var(--color-primary)));
    outline-offset: 2px;
}

.site-header :focus-visible {
    outline-color: var(--wc-focus-ring-header, var(--wc-focus-ring, var(--wc-primary-text, var(--color-primary))));
}

/* a dropdown link is flush with the edge of its panel: an outside ring would lie half on the page behind the panel, so it is drawn inside */
.nav-menu .sub-menu a:focus-visible {
    outline-offset: -3px;
}

.topbar :focus-visible {
    outline-color: currentColor;
}

.site-footer :focus-visible {
    outline-color: var(--wc-focus-ring-footer, var(--wc-focus-ring, var(--wc-primary-text, var(--color-primary))));
}

/* ============================================
   Layout
   ============================================ */
.main-wrapper {
    min-height: calc(100vh - var(--header-height) - 200px);
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

/* Blog and shop pages bring no container of their own */
.blog-page,
.blog-post,
.shop-container,
.product-detail,
.cart-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
}

.shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spacing-4);
}

.shop-filters .filter-group {
    flex: 1 1 200px;
}

/* ============================================
   Header
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--wc-header-bg, var(--color-bg));
    color: var(--wc-header-text, inherit);
    border-bottom: 1px solid var(--wc-header-border, var(--color-border));
    /* --wc-header-min: thema.js keeps the height the header had before the script, when fitting the name made it smaller */
    min-height: max(var(--header-height), var(--wc-header-min, 0px));
}

.header-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-2) var(--spacing-4);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 var(--spacing-3);
        gap: var(--spacing-2);
    }

    .site-logo {
        font-size: var(--font-size-lg);
        /* Slightly smaller logo */
    }
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xl);
    font-weight: 800;
    /* Bolder */
    color: var(--wc-header-text, var(--wc-primary-text));
    /* Primary color (or the text colour of the header, when the header has colours) */
    letter-spacing: -0.5px;
    font-family: var(--font-family-heading);
    white-space: nowrap;
    flex-shrink: 0;
}

.site-logo .site-name {
    background: var(--wc-name-bg, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--wc-name-fill, transparent);
    color: var(--wc-header-text, inherit);
}

.site-logo img {
    height: 40px;
    width: auto;
}

/* Site name: it wraps (balanced) instead of running into the buttons; a long name is smaller (header.php adds name-long from
   24 characters, name-xlong from 40, name-clamp from 70). The caps with min() hold for themes with a big logo size too. */
.site-logo .site-name {
    white-space: normal;
    width: max-content;
    max-width: var(--wc-name-max, 100%);
    text-wrap: balance;
    overflow-wrap: anywhere;
    /* thema.js sets --wc-name-scale (< 1) when the name still needs more than two lines in the room it has */
    font-size: calc(1em * var(--wc-name-scale, 1));
}

.site-header .site-logo.name-long .site-name {
    white-space: normal;
    font-size: calc(min(0.85em, 1.6rem) * var(--wc-name-scale, 1));
    line-height: 1.25;
    letter-spacing: 0.03em;
}

.site-logo.name-xlong .site-name {
    font-size: calc(min(0.7em, 1.25rem) * var(--wc-name-scale, 1));
}

/* a long name is two lines at most: before thema.js has fitted it the third line is cut off, so the header does not jump (a really long
   name, 70+ characters, is cut for good; the full name is in the aria-label) */
.site-logo.name-long .site-name {
    max-height: 2.5em;   /* exactly two lines of 1.25: no third line shows, the descenders of the second do */
    overflow: hidden;
}

@media (min-width: 901px) {
    /* beside the menu the logo may shrink and its name has a limited width; the buttons never shrink */
    .site-header:not(.header-layout-centered):not(.header-layout-logo-above) .site-logo {
        flex-shrink: 1;
        min-width: 0;
        --wc-name-max: clamp(10rem, 40vw, 30rem);
    }

    .header-layout-centered .site-logo {
        --wc-name-max: min(100%, 44rem);
        min-width: 0;
    }

    .header-actions {
        flex-shrink: 0;
    }
}

/* Shop Filters */
.filter-group {
    margin-bottom: var(--spacing-4);
}

.filter-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    transition: all var(--transition-fast);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.main-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* Without script a long menu wraps onto a second row instead of running over the buttons. With script it is one row on a
   computer: thema.js moves the items that do not fit into a "Meer" submenu (see "Menu that fits"), so the header keeps its
   height whatever the number of items. (Mobile: a column, see below.) */
.nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--spacing-6);
}

.nav-menu a:where(:not(.btn)) {
    display: block;
    color: var(--wc-header-text, var(--color-text));
    font-weight: 500;
    padding: var(--spacing-2) 0;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-menu a:where(:not(.btn)):hover,
.nav-menu a:where(:not(.btn)).active {
    color: var(--wc-header-text, var(--wc-primary-text));
    border-bottom-color: var(--wc-header-active, var(--color-primary));
}

/* Sub menu: pages nested under a parent page (one level) */
.nav-menu > li {
    position: relative;
}

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 110;
    min-width: 12rem;
    padding: var(--spacing-2) 0;
    background: var(--wc-header-bg, var(--color-bg));
    border: 1px solid var(--wc-header-border, var(--color-border));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--transition-fast);
}

/* An invisible bridge under the parent link while its menu is open: a theme may move the panel down (`top: calc(100% + 8px)`);
   the pointer then stays on the item on its way from the link to the panel, and the menu does not close under the mouse.
   It hangs below the link (not over it), so the link itself stays clickable. */
.nav-menu li.has-children:hover::after,
.nav-menu li.has-children:focus-within::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 32px;
    z-index: 109;   /* below the panel (110): the bridge only fills the gap, it never covers a link of the panel */
}

@media (min-width: 901px) {
    /* The panel often starts a few pixels inside the item (`top: calc(100% - 3px)`) or exactly at its bottom edge, and the item is
       only as wide as its link: a pointer that moves diagonally from the link to a link of the (wider) panel leaves the item at the
       side, above the panel's edge. A triangle above the panel (part of the panel, so the item stays hovered; it is highest at the
       panel's left edge and tapers to nothing at the right, so it hardly covers the neighbouring items) closes that
       corner. It is hit-testable only while the panel is open (visibility). */
    .nav-menu .sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 24px;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
    }
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.nav-menu .sub-menu a:where(:not(.btn)) {
    display: block;
    padding: var(--spacing-2) var(--spacing-4);
    border-bottom: 0;
    white-space: nowrap;
}

.nav-menu .sub-menu a:where(:not(.btn)):hover,
.nav-menu .sub-menu a:where(:not(.btn)).active {
    background: var(--wc-header-hover-bg, var(--color-bg-secondary));
}

@media (max-width: 1100px) {
    .nav-menu {
        column-gap: var(--spacing-4);
    }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    padding: var(--spacing-2);
    /* neutral: no box, border or shadow, whatever the CSS of the buttons (a theme) says for `button` */
    background: none;
    border: 0;
    box-shadow: none;
    color: inherit;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.hamburger span {
    display: block;
    height: 2px;
    background: var(--wc-header-text, var(--color-text));
    transition: all var(--transition-normal);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.cart-link {
    position: relative;
    color: var(--wc-header-text, var(--color-text));
    padding: var(--spacing-2);
}

.cart-link:hover {
    color: var(--wc-header-text, var(--wc-primary-text));
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: var(--wc-accent, var(--color-primary));
    color: var(--wc-on-accent, var(--wc-on-primary));
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile navigation: the menu slides in when the toggle sets .is-open */
@media (max-width: 900px) {
    /* Logo on the left, cart and menu toggle on the right */
    .header-container {
        justify-content: flex-start;
    }

    .site-logo {
        margin-right: auto;
    }

    .header-actions {
        order: 2;
    }

    .mobile-menu-toggle {
        display: block;
        order: 3;
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        display: block;
        padding: var(--spacing-6);
        background: var(--wc-header-bg, var(--color-bg));
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--transition-normal), visibility 0s linear var(--transition-normal);
    }

    .main-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .nav-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--spacing-2);
    }

    .nav-menu a:where(:not(.btn)) {
        display: block;
        font-size: var(--font-size-lg);
        padding: var(--spacing-3) 0;
        white-space: normal;
    }

    /* Sub menus are always open in the mobile menu */
    .nav-menu li.has-children:hover::after,
    .nav-menu li.has-children:focus-within::after {
        display: none;
    }

    .nav-menu .sub-menu {
        position: static;
        min-width: 0;
        padding: 0 0 0 var(--spacing-4);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-menu .sub-menu a:where(:not(.btn)) {
        padding: var(--spacing-2) 0;
        font-size: var(--font-size-base);
        white-space: normal;
    }

    .nav-menu .sub-menu a:where(:not(.btn)):hover,
    .nav-menu .sub-menu a:where(:not(.btn)).active {
        background: none;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: var(--wc-footer-bg, var(--color-bg-secondary));
    color: var(--wc-footer-text, inherit);
    border-top: 1px solid var(--wc-footer-border, var(--color-border));
    margin-top: var(--spacing-16);
}

.footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-4) var(--spacing-8);
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.footer-widget h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
    color: var(--wc-footer-text, var(--color-text));
}

.footer-links li {
    margin-bottom: var(--spacing-2);
}

.footer-links a {
    color: var(--wc-footer-muted, var(--color-text-muted));
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--wc-footer-text, var(--wc-primary-text));
    text-decoration: var(--wc-footer-hover-decoration, none);
}

.social-links {
    display: flex;
    gap: var(--spacing-3);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--wc-footer-social-bg, var(--color-bg));
    border-radius: var(--radius-full);
    color: var(--wc-footer-text, var(--color-text-muted));
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--wc-accent, var(--color-primary));
    color: var(--wc-on-accent, var(--wc-on-primary));
}

.footer-bottom {
    border-top: 1px solid var(--wc-footer-border, var(--color-border));
    padding-top: var(--spacing-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.copyright {
    color: var(--wc-footer-muted, var(--color-text-muted));
    font-size: var(--font-size-sm);
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

.payment-methods img {
    display: block;
    width: 48px;
    height: 30px;
}

.payment-label {
    font-size: var(--font-size-sm);
    color: var(--wc-footer-muted, var(--color-text-muted));
    margin-right: var(--spacing-2);
}

.powered-by {
    width: 100%;
    text-align: center;
    color: var(--wc-footer-subtle, var(--color-text-light));
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-4);
}

.powered-by a {
    color: inherit;
}

.powered-by a:hover {
    color: var(--wc-footer-text, var(--wc-primary-text));
    text-decoration: var(--wc-footer-hover-decoration, none);
}

/* ============================================
   Buttons
   ============================================ */
.btn,
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--wc-on-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: var(--wc-on-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-border);
}

/* ============================================
   Forms
   ============================================ */
.form-group {
    margin-bottom: var(--spacing-4);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
}

/* Darken form borders for better visibility */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-3);
    border: 1px solid var(--color-border-dark);
    /* Darker border */
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-50);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

/* ============================================
   Contact Page Styles
   ============================================ */
.info-card {
    text-align: center;
    padding: var(--spacing-6);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    height: 100%;
    transition: transform var(--transition-fast);
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--color-bg-tertiary);
    color: var(--wc-primary-text);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-4);
}

.info-icon svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   Blog Layout
   ============================================ */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-8);
    margin: var(--wc-blog-layout-gap, var(--spacing-8)) 0;   /* a theme with a full-width title band sets --wc-blog-layout-gap: 0 */
}

.blog-content {
    min-width: 0;
    /* Prevent grid blowout */
}

.blog-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-6));
    align-self: start;
}

@media (max-width: 900px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
        margin-top: var(--spacing-8);
    }
}

/* Make images responsive */
.post-content img {
    height: auto;
    border-radius: var(--radius-md);
}

/* ---- Blog post page: featured image, share buttons, related posts (themes may override; low specificity on purpose) ----
   Featured image: the whole photo is shown. A landscape photo fills the width; a tall (phone) photo is limited in height and
   centred on a neutral ground (contain), so faces and text are never cropped away from a news photo. */
.blog-post .featured-image {
    margin: 0 0 var(--spacing-8);
    text-align: center;
}

.blog-post .featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(70vh, 34rem);
    object-fit: contain;
    object-position: center;
    background: var(--color-bg-tertiary);
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-3);
    margin: var(--spacing-8) 0 0;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.share-buttons > span {
    margin-right: var(--spacing-1);
    font-weight: 600;
    color: var(--color-text-muted);
}

.share-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.share-buttons a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--wc-on-primary, #fff);
}

.share-buttons a:focus-visible {
    outline: 2px solid var(--wc-focus-ring, var(--wc-primary-text, var(--color-primary)));
    outline-offset: 2px;
}

.share-buttons svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.related-posts {
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--color-border);
}

.related-posts > h2 {
    margin: 0 0 var(--spacing-6);
    font-size: 1.5rem;
}

.related-posts .post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-6);
}

.post-card-small {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card-small:hover,
.post-card-small:focus-within {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.post-card-small .post-image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-tertiary);
}

.post-card-small .post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-small .post-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
}

.post-card-small h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.post-card-small h3 a {
    color: var(--color-text);
}

.post-card-small h3 a:hover {
    color: var(--wc-primary-text);
}

.post-card-small time {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .related-posts .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .related-posts .post-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-card-small:hover,
    .post-card-small:focus-within {
        transform: none;
    }
}

/* Mobile Menu Toggle via JavaScript */
.notification-container {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.notification.success {
    border-left: 4px solid var(--color-success);
}

.notification.error {
    border-left: 4px solid var(--color-error);
}

.notification button {
    margin-left: auto;
    padding: var(--spacing-1);
    color: var(--color-text-muted);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Breadcrumb ("Kruimelpad", src/breadcrumbs.php; docs/themes.md section 6)
   nav.breadcrumb > ol > li (a, or text for a menu heading; the last li has aria-current="page"). Colours come from the contract
   variables only: muted text, links in --wc-primary-text, the page focus ring. The separator is drawn here (the empty alternative
   text keeps it out of the screen reader). Pages wrap it in .container.breadcrumb-container.
   ============================================ */
.breadcrumb {
    padding: var(--spacing-4) 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-1) 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li {
    min-width: 0;
    overflow-wrap: anywhere;
}

.breadcrumb li {
    margin-right: var(--spacing-2);
}

.breadcrumb li:last-child {
    margin-right: 0;
}

.breadcrumb li + li::before {
    content: '\203A';
    content: '\203A' / '';
    margin-right: var(--spacing-2);
    color: var(--color-text-muted);
}

.breadcrumb a {
    color: var(--wc-primary-text, var(--color-text-muted));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.breadcrumb a:hover {
    color: var(--wc-primary-text-hover, var(--wc-primary-text, var(--color-text)));
    text-decoration-thickness: 2px;
}

.breadcrumb [aria-current="page"] {
    color: var(--color-text);
}

.breadcrumb-container {
    padding-top: var(--spacing-2);
}

/* ============================================
   Loading States
   ============================================ */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    color: var(--color-text-muted);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-3);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Empty States
   ============================================ */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
    color: var(--color-text-muted);
}

.empty-state svg {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-4);
    opacity: 0.5;
}

.empty-state h2,
.empty-state h3 {
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.empty-state p {
    margin-bottom: var(--spacing-6);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile Menu Toggle via JavaScript */
.notification-container {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.notification {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.notification.success {
    border-left: 4px solid var(--color-success);
}

.notification.error {
    border-left: 4px solid var(--color-error);
}

.notification button {
    margin-left: auto;
    padding: var(--spacing-1);
    color: var(--color-text-muted);
}

/* ============================================
   Buttons
   ============================================ */
.btn,
button,
input[type="submit"],
input[type="button"],
.btn-primary,
.btn-secondary,
.btn-add-cart,
.btn-checkout,
.btn-place-order,
.btn-continue,
.btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--wc-btn-radius, var(--radius-md));   /* the button shape token of the theme (square|rounded|pill) */
    font-weight: 600;
    line-height: 1.2;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-sm);
    gap: var(--spacing-2);
}

.btn-primary,
button[type="submit"],
.btn-add-cart,
.btn-checkout,
.btn-place-order {
    background-color: var(--color-primary);
    color: var(--wc-on-primary);
}

.btn-primary:hover,
button[type="submit"]:hover,
.btn-add-cart:hover,
.btn-checkout:hover,
.btn-place-order:hover {
    background-color: var(--color-primary-dark);
    color: var(--wc-on-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary,
.btn-continue {
    background-color: var(--color-bg);
    color: var(--wc-secondary, var(--color-text));
    border-color: var(--wc-secondary, var(--color-border-dark));
}

.btn-secondary:hover,
.btn-continue:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-text-muted);
}

/* The ghost button of the page editor (content.css paints it black): the text colour of the page, so it reads on a dark page too.
   (the light/dark text sections of the editor keep their own colours; a theme restyles it with a more specific selector) */
.cb-content .is-btn-ghost1,
.cb-content a.is-btn-ghost1 {
    color: var(--color-text);
    border-color: var(--color-text);
}

/* ============================================
   Product Cards
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-8);
    margin: var(--spacing-8) 0;
}

.product-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* Context for absolute positioning if needed */
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.product-card a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-tertiary);
    position: relative;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    /* Ensure it's not inline */
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-info {
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: var(--color-bg);
}

.product-info h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
    font-weight: 600;
    color: var(--color-text);
}

.product-price {
    color: var(--wc-primary-text);
    font-weight: 700;
    font-size: var(--font-size-xl);
    margin-top: auto;
    display: block;
}

/* ============================================
   Menu that fits (thema.js "fitMenu"): on a computer the menu is one row; the items that do not fit go into a "Meer"
   submenu that thema.js builds (li.nav-more, a copy of the hidden items). The originals stay in the page, hidden.
   ============================================ */
@media (min-width: 901px) {
    .nav-menu > li[hidden],
    .nav-menu > li.nav-more[hidden] {
        display: none !important;
    }

    .nav-menu > li {
        flex: 0 0 auto;
    }

}

/* With script: before thema.js has measured (it sets wc-nav-ready on <html>) the header already has its final shape: one row, the
   menu clipped inside its own box (it never pushes the buttons to a second row), so nothing moves when the script has run.
   If the script never comes, after two seconds the menu is let go and wraps again (animation, whatever the script did). */
@media (min-width: 901px) and (scripting: enabled) {
    html.wc-nav-ready .nav-menu {
        flex-wrap: nowrap;
    }

    html:not(.wc-nav-ready) .site-header .main-nav {
        max-width: 100%;
        overflow: hidden;
        animation: wc-nav-release 0s linear 2s forwards;
    }

    html:not(.wc-nav-ready) .nav-menu {
        flex-wrap: nowrap;
        animation: wc-nav-wrap 0s linear 2s forwards;
    }

    /* centred header: the menu and the buttons share a row; the menu may take what the buttons leave (about 24rem) */
    html:not(.wc-nav-ready) .header-layout-centered .main-nav {
        max-width: calc(100% - 24rem);
    }
}

/* the name of the site is at most two lines before the script has fitted it too, so the header is never much higher than it ends up */
@media (scripting: enabled) {
    html:not(.wc-nav-ready) .site-header .site-logo .site-name {
        max-height: 2.4em;
        max-height: 2lh;   /* two lines of whatever line height the theme has */
        overflow: hidden;
        animation: wc-name-release 0s linear 2s forwards;
    }
}

@keyframes wc-name-release {
    to {
        max-height: none;
        overflow: visible;
    }
}

@keyframes wc-nav-release {
    to {
        overflow: visible;
        max-width: none;
    }
}

@keyframes wc-nav-wrap {
    to {
        flex-wrap: wrap;
    }
}

@media (min-width: 901px) {
    /* the submenu of "Meer" is aligned to the right edge of its item: it is the last one of the row */
    .nav-menu > li.nav-more > .sub-menu {
        left: auto;
        right: 0;
        margin-left: 0;
    }

    .nav-menu > li.nav-more > .sub-menu a:where(:not(.btn)) {
        white-space: nowrap;
    }
}

/* a heading or a parent page that went into "Meer": its label (not a link), then its pages a little indented */
.nav-menu .sub-menu .nav-more-label {
    display: block;
    padding: var(--spacing-2) var(--spacing-4);
    font-weight: 700;
    white-space: nowrap;
    color: var(--wc-header-text, var(--color-text));
}

.nav-menu .sub-menu li.nav-more-child > a:where(:not(.btn)) {
    padding-left: calc(var(--spacing-4) + var(--spacing-4));
}

@media (max-width: 900px) {
    .nav-menu > li.nav-more {
        display: none;
    }
}

/* Escape in the search field of the header closes the overlay (thema.js sets .is-closed until the focus leaves the box) */
.header-actions .header-search.is-closed:focus-within input[type="search"] {
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   Theme builder ("Thema & huisstijl")
   This markup (top bar, header button, tagline, header layouts, footer blocks) only exists when the owner has saved
   settings in the builder. The colours, fonts and sizes of those settings come from the block at the very end of the
   stylesheet that WebCreator generates (ThemeStyles); the rules here are the same for every site.
   ============================================ */

/* Top bar */
.topbar {
    background: var(--wc-secondary, var(--color-text));
    color: var(--wc-on-secondary, var(--color-bg));
    font-size: var(--font-size-sm);
}

.topbar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-2) var(--spacing-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-1) var(--spacing-6);
}

.topbar-text {
    margin: 0;
}

.topbar-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1) var(--spacing-5);
    margin: 0 0 0 auto;
    padding: 0;
}

.topbar a {
    color: inherit;
}

.topbar a:hover {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .topbar-inner {
        justify-content: center;
        text-align: center;
    }

    .topbar-contact {
        justify-content: center;
        margin-left: 0;
    }
}

/* Language links (automatic translation by Google), in the footer and/or the top bar: wc_translate_links() in theme.php.
   Colours only come from the footer variables (footer) and from the top bar's own colours (inherit). */
.wc-translate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.wc-translate-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.wc-translate-label svg {
    flex: none;
}

.wc-translate-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-translate-list a {
    display: inline-block;
    padding: 0.25rem 0.5rem;
}

.footer-translate {
    margin-bottom: var(--spacing-6);
}

.wc-translate-footer,
.wc-translate-footer .wc-translate-note {
    color: var(--wc-footer-muted, var(--color-text-muted));
}

.wc-translate-footer .wc-translate-note {
    flex-basis: 100%;
    font-size: 0.9em;
}

.wc-translate-footer a {
    color: inherit;
    text-decoration: underline;
}

.wc-translate-footer a:hover {
    color: var(--wc-footer-text, var(--wc-primary-text));
}

.wc-translate-topbar a {
    color: inherit;
}

.wc-translate-topbar a:hover {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .wc-translate-list a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ============================================
   Language switcher (docs/multilingual-design.md 4.4): wc_lang_switcher() in theme.php, only on a site with 2+ live languages.
   Colours only from the contract variables: header text/active/background/border (in the header), the colours of the top bar (inherit),
   the footer variables (in the footer); the focus ring is the one of the surface (see Focus ring). In the header it takes the room of the
   other buttons (.header-actions, which thema.js measures); on a phone it is repeated at the bottom of the menu (.nav-lang-item).
   ============================================ */
.wc-lang {
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.wc-lang-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-lang-list a,
.wc-lang-toggle {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.wc-lang-list a[aria-current],
.wc-lang-toggle {
    font-weight: 700;
}

.wc-lang-header {
    flex: none;
}

.site-header .wc-lang a,
.site-header .wc-lang .wc-lang-toggle {
    color: var(--wc-header-text, var(--color-text));
}

.site-header .wc-lang a:hover,
.site-header .wc-lang a[aria-current],
.site-header .wc-lang .wc-lang-toggle:hover {
    color: var(--wc-header-text, var(--wc-primary-text));
    border-bottom-color: var(--wc-header-active, var(--color-primary));
}

.wc-lang-topbar a,
.wc-lang-topbar .wc-lang-toggle {
    color: inherit;
}

.wc-lang-topbar a:hover,
.wc-lang-topbar a[aria-current],
.wc-lang-topbar .wc-lang-toggle:hover {
    text-decoration: underline;
}

.footer-lang {
    margin-bottom: var(--spacing-6);
}

.wc-lang-footer a,
.wc-lang-footer .wc-lang-toggle {
    color: var(--wc-footer-muted, var(--color-text-muted));
}

.wc-lang-footer a:hover,
.wc-lang-footer a[aria-current],
.wc-lang-footer .wc-lang-toggle:hover {
    color: var(--wc-footer-text, var(--wc-primary-text));
    text-decoration: underline;
}

/* Style "dropdown": a button with the current language and a list under it. A disclosure (thema.js): without script the hover and focus
   rules show the list. */
.wc-lang-dropdown {
    position: relative;
}

.wc-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
}

.wc-lang-caret {
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.wc-lang-dropdown .wc-lang-list {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    z-index: 1100;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 100%;
    padding: var(--spacing-2) 0;
    background: var(--wc-header-bg, var(--color-bg));
    border: 1px solid var(--wc-header-border, var(--color-border));
    box-shadow: var(--shadow-md);
}

.wc-lang-dropdown.is-open .wc-lang-list,
html:not(.wc-lang-js) .wc-lang-dropdown:hover .wc-lang-list,
html:not(.wc-lang-js) .wc-lang-dropdown:focus-within .wc-lang-list {
    display: flex;
}

.wc-lang-dropdown .wc-lang-list a {
    display: block;
    border-bottom: 0;
    white-space: nowrap;
}

.wc-lang-dropdown .wc-lang-list a:hover {
    background: var(--wc-header-hover-bg, var(--color-bg-secondary));
}

/* a link of the list is flush with the edge of its panel: the focus ring is drawn inside (like a sub menu item) */
.wc-lang-dropdown .wc-lang-list a:focus-visible {
    outline-offset: -3px;
}

.wc-lang-topbar.wc-lang-dropdown .wc-lang-list {
    background: var(--wc-secondary, var(--color-text));
    color: var(--wc-on-secondary, var(--color-bg));
    border-color: currentColor;
}

.wc-lang-topbar.wc-lang-dropdown .wc-lang-list a:hover {
    background: none;
}

.wc-lang-footer.wc-lang-dropdown {
    display: inline-block;   /* as wide as its button, not as the footer: the panel must not cover what is next to it */
}

.wc-lang-footer.wc-lang-dropdown .wc-lang-list {
    top: auto;
    bottom: 100%;
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: auto;
    background: var(--wc-footer-bg, var(--color-bg-secondary));
    border-color: var(--wc-footer-border, var(--color-border));
}

.wc-lang-footer.wc-lang-dropdown .wc-lang-list a:hover {
    background: none;
}

/* A header with the logo above the menu keeps room for its buttons in the corner (see "Site search" below): before thema.js has measured
   them it guesses their width. With the switcher the buttons are wider, so the guess is wider too (else the name wraps differently
   once the script has measured, and the page shifts). */
@media (min-width: 901px) {
    .header-layout-logo-above:has(.header-actions .wc-lang) .site-logo,
    .header-layout-logo-above:has(.header-actions .wc-lang) .site-logo.name-long {
        padding-inline: calc(var(--wc-actions-w, 25rem) + var(--spacing-4) * 2);
        padding-inline-start: var(--wc-name-pad-start, calc(var(--wc-actions-w, 25rem) + var(--spacing-4) * 2));
    }
}

/* the copy in the mobile menu: a computer does not show it, a phone shows it and not the one in the header bar */
.nav-lang-item {
    display: none;
}

@media (max-width: 900px) {
    .header-actions .wc-lang-header {
        display: none;
    }

    .main-nav .nav-lang-item {
        display: block;
        margin-top: var(--spacing-6);
        padding-top: var(--spacing-4);
        border-top: 1px solid var(--wc-header-border, var(--color-border));
    }

    .nav-lang-item .wc-lang {
        font-size: 1rem;
    }

    .nav-lang-item .wc-lang-list a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 var(--spacing-3);
    }
}

@media (max-width: 900px) {
    .wc-lang-topbar .wc-lang-list a,
    .wc-lang-topbar .wc-lang-toggle,
    .wc-lang-footer .wc-lang-list a,
    .wc-lang-footer .wc-lang-toggle {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ============================================
   Language suggestion bar (docs/multilingual-design.md 4.7): wc_lang_hint_bar() in theme.php, printed at the very top of the page (after the skip
   link) only to a visitor whose browser prefers another live language, so it takes room only when it is there. Not sticky: it scrolls away and
   the sticky header stays at the top. Page colours only (text on the secondary page background, the border of the page), so it reads on every
   theme and with the owner's own page colours; the link is underlined and has the text colour. The close button is hidden until thema.js runs.
   ============================================ */
.wc-lang-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-4);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.wc-lang-hint-text {
    margin: 0;
    padding: var(--spacing-2) 0;
    text-align: center;
}

.wc-lang-hint-link {
    display: inline-block;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: underline;
}

.wc-lang-hint-link:hover {
    text-decoration-thickness: 2px;
}

.wc-lang-hint-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0 calc(var(--spacing-2) * -1) 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
}

.wc-lang-hint-close[hidden] {
    display: none;
}

.wc-lang-hint-close:hover {
    background: var(--color-bg-tertiary);
}

@media (max-width: 600px) {
    /* the link is a touch target of its own on a phone */
    .wc-lang-hint-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 var(--spacing-1);
    }
}

/* Header: not sticky, the logo and its slogan, the button */
.site-header.is-static {
    position: static;
}

.site-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.site-logo img + .site-logo-text {
    margin-left: var(--spacing-3);
}

.site-tagline {
    max-width: 24rem;
    white-space: normal;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--wc-header-text, var(--color-text-muted));
    opacity: var(--wc-tagline-opacity, 1);
}

.site-tagline:empty {
    display: none;
}

.header-cta {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* The button of the header: the accent colour of the builder or theme (--wc-cta-bg), else the main colour. The selector is
   .btn.header-cta (0,2,0) on purpose: a theme that layers a gradient or image on `.btn-primary` (0,1,0) does not reach the header
   button. A theme that wants to restyle the header button writes `.site-header .header-cta` (also 0,2,0, and later, so it wins). */
.btn.header-cta,
.btn.header-cta-mobile {
    background-color: var(--wc-cta-bg, var(--color-primary));
    background-image: none;
    border-color: var(--wc-cta-bg, var(--color-primary));
    color: var(--wc-on-cta, var(--wc-on-primary));
}

.btn.header-cta:hover,
.btn.header-cta-mobile:hover {
    background-color: var(--wc-cta-bg-hover, var(--color-primary-dark));
    background-image: none;
    border-color: var(--wc-cta-bg-hover, var(--color-primary-dark));
    color: var(--wc-on-cta-hover, var(--wc-on-primary-hover));
}

.nav-cta-item {
    display: none;
}

/* Header layouts: only on a wide screen, the mobile header is the same for all of them */
@media (min-width: 901px) {
    /* centred: the logo in the middle of a row of its own, under it the menu and the buttons, also in the middle */
    .header-layout-centered .header-container {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--spacing-1);
        padding-top: var(--spacing-3);
    }

    .header-layout-centered .site-logo {
        flex: 0 0 100%;
        justify-content: center;
    }

    .header-layout-centered .main-nav {
        flex: 0 1 auto;
    }

    .header-layout-logo-above .header-container {
        position: relative;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--spacing-1);
        padding-top: var(--spacing-3);
    }

    .header-layout-logo-above .site-logo {
        flex: 0 0 100%;
        justify-content: center;
    }

    .header-layout-logo-above .main-nav {
        flex: 1 1 100%;
    }

    .header-layout-logo-above .header-actions {
        position: absolute;
        top: var(--spacing-3);
        right: var(--spacing-4);
    }
}

@media (max-width: 900px) {
    /* A logo and a name of the builder must fit next to the menu button, whatever size the owner chose for a computer */
    [class*="header-layout-"] .site-logo {
        min-width: 0;
        flex-shrink: 1;
    }

    [class*="header-layout-"] .site-logo img {
        width: auto;
        height: auto;
        max-height: 44px;
        max-width: 55vw;
    }

    [class*="header-layout-"] .site-logo .site-name {
        white-space: normal;
        line-height: 1.15;
    }

    .site-tagline {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .nav-menu .nav-cta-item {
        display: list-item;
        margin-top: var(--spacing-4);
    }

    .nav-menu .nav-cta-item a.header-cta-mobile {
        display: inline-flex;
        padding: var(--spacing-3) var(--spacing-6);
        font-size: var(--font-size-base);
        color: var(--wc-on-cta, var(--wc-on-primary));
        border-bottom: 0;
    }

    .nav-menu .nav-cta-item a.header-cta-mobile:hover {
        color: var(--wc-on-cta-hover, var(--wc-on-primary-hover));
    }
}

/* Long words: a long unbroken word in a heading (or the name of the site) wraps instead of pushing the page wider */
h1, h2, h3 {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Footer: a fixed number of columns, the contact block, the opening hours */
@media (min-width: 769px) {
    .footer-widgets.footer-cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-widgets.footer-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-widgets.footer-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-widgets.footer-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 1000px) {
    .footer-widgets.footer-cols-3,
    .footer-widgets.footer-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* (scoped to .footer-about, the about widget of the builder: the footer of a site without settings has an empty
   .footer-contact of its own, which must stay as it was) */
.footer-about p {
    margin: 0 0 var(--spacing-3);
}

.footer-about .footer-contact {
    margin-top: var(--spacing-4);
}

.footer-about .footer-contact p,
.footer-about .footer-contact address {
    margin: 0 0 var(--spacing-2);
    font-style: normal;
    line-height: 1.6;
}

.footer-about .footer-contact a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-about .footer-contact a:hover {
    color: var(--wc-primary-text);
}

.footer-about .footer-legal {
    font-size: var(--font-size-sm);
    color: var(--wc-footer-muted, var(--color-text-muted));
}

.footer-hours {
    margin: 0;
    padding: 0;
    color: inherit;
}

/* The day on the left, the hours on the right; when they do not fit on one line the hours go under the day */
.footer-hours li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--spacing-4);
    padding: 2px 0;
}

.footer-hours .hours-day {
    white-space: nowrap;
}

.footer-hours .hours-time {
    margin-left: auto;
    text-align: right;
}

.footer-hours .hours-range {
    white-space: nowrap;
}

/* The owner can show up to seven social networks: they wrap instead of running off the screen */
.social-links {
    flex-wrap: wrap;
}

.footer-hours .hours-time.is-closed {
    /* "Gesloten": the quieter footer colour, not an opacity (that would drop it below 4.5:1) */
    color: var(--wc-footer-muted, var(--color-text-muted));
}

.footer-hours-note {
    margin: var(--spacing-3) 0 0;
    font-size: var(--font-size-sm);
    color: var(--wc-footer-muted, var(--color-text-muted));
}

/* ============================================
   Menu heading (docs/pages-menu.md): a menu item without a page of its own that only opens its submenu.
   header.php renders it as `li.has-children.has-heading > a.nav-heading[role=button][aria-expanded]`, an `a` so that
   every theme styles it with its own `.nav-menu a` rules. thema.js sets .is-open on the li.
   ============================================ */
.nav-menu a.nav-heading {
    cursor: pointer;
}

/* Opened by a click or key press (hovering and keyboard focus open it already, see above) */
.nav-menu li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* With script (wc-nav-js, set by thema.js) the open state of a heading is the class .is-open and nothing else: hover and
   focus-within of the theme must not show a submenu that aria-expanded says is closed. !important: some themes style
   their own submenu hover. Without script none of this applies. */
@media (min-width: 901px) {
    html.wc-nav-js .nav-menu li.has-heading:not(.is-open) > .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html.wc-nav-js .nav-menu li.has-heading.is-open > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none;
    }

    html.wc-nav-js .nav-menu li.has-heading:not(.is-open)::after {
        display: none;
    }
}

@media (max-width: 900px) {
    /* In the mobile menu the sub items of a heading are folded away until the heading is tapped */
    .nav-menu li.has-heading:not(.is-open) > .sub-menu {
        display: none;
    }

    /* The themes hide their dropdown arrow here; a heading needs a hint that it opens */
    .nav-menu > li.has-heading > a.nav-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-menu > li.has-heading > a.nav-heading::after {
        content: "";
        display: block;
        position: static;
        flex: none;
        width: 0.5em;
        height: 0.5em;
        margin: 0 0.25em 0 0.75em;
        border: 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        background: none;
        opacity: 1;
        transform: rotate(45deg);
        transition: transform var(--transition-fast);
    }

    .nav-menu > li.has-heading.is-open > a.nav-heading::after {
        transform: rotate(-135deg);
    }
}

/* ============================================
   Site search (docs/seo.md "Zoeken op de website")
   The box in the header (theme builder: header.search) and the results page (/zoeken). Colours only from the contract
   variables: header text/background and --wc-focus-ring-header in the header, the page variables on the results page.
   ============================================ */
.header-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    position: relative;
}

.header-search input[type="search"] {
    min-width: 0;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--wc-header-text, var(--color-text));
    border-radius: var(--wc-btn-radius, var(--radius-md));
    background: transparent;
    color: var(--wc-header-text, var(--color-text));
    font-size: var(--font-size-sm);
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
}

.header-search input[type="search"]::placeholder {
    /* a little softer than typed text (and italic), still >= 4.5:1 on the header (checked by bin/theme-check.js) */
    color: color-mix(in srgb, var(--wc-header-text, var(--color-text)) 85%, var(--wc-header-bg, var(--color-bg)));
    font-style: italic;
    opacity: 1;
}

/* On a computer the box in the bar is only the icon: it takes the same room whatever the menu is, so the header never reflows.
   The field is an overlay under the icon that shows while the box has focus (click on the icon, or Tab into it); thema.js
   moves the focus to the field when the icon is clicked. */
.header-actions .header-search input[type="search"] {
    position: absolute;
    top: calc(100% + var(--spacing-2));
    right: 0;
    z-index: 1100;
    width: 16rem;
    max-width: calc(100vw - 2rem);
    background: var(--wc-header-bg, var(--color-bg));
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
}

.header-actions .header-search:focus-within input[type="search"] {
    opacity: 1;
    pointer-events: auto;
}

.header-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.header-search .header-search-submit {
    padding: var(--spacing-2);
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--wc-header-text, var(--color-text));
}

.header-search .header-search-submit:hover {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--wc-header-active, var(--wc-header-text, var(--color-text)));
}

.nav-search-item {
    display: none;
}

@media (max-width: 900px) {
    .header-actions .header-search {
        display: none;
    }

    .main-nav .nav-search-item {
        display: block;
        margin-bottom: var(--spacing-4);
    }

    .nav-search-item .header-search input[type="search"],
    .nav-search-item .header-search input[type="search"]:focus {
        flex: 1;
        width: auto;
        padding: var(--spacing-3);
        font-size: 1rem;   /* 16px: iOS does not zoom into the field */
    }
}

/* A header with the logo above the menu has its buttons (search, header button, cart) in the top right corner, on the row of the
   logo: keep room for them on both sides (the logo stays in the middle) and let a long name wrap instead of running under them.
   The room is the width of the buttons: thema.js measures it (--wc-actions-w); without script a guess. */
@media (min-width: 901px) {
    .header-layout-logo-above:has(.header-actions > *) .site-logo {
        box-sizing: border-box;
        padding-inline: calc(var(--wc-actions-w, 18rem) + var(--spacing-4) * 2);
        padding-inline-start: var(--wc-name-pad-start, calc(var(--wc-actions-w, 18rem) + var(--spacing-4) * 2));
    }

    /* a long name needs the room for the buttons from the start (a short one is narrow anyway), so it does not wrap differently when thema.js has measured */
    .header-layout-logo-above:has(.header-actions > *) .site-logo.name-long {
        padding-inline: calc(var(--wc-actions-w, 18rem) + var(--spacing-4) * 2);
        padding-inline-start: var(--wc-name-pad-start, calc(var(--wc-actions-w, 18rem) + var(--spacing-4) * 2));
    }

    .header-layout-logo-above .site-logo {
        --wc-name-max: 100%;
        min-width: 0;
        /* the logo row is at least as high as the buttons in the corner, so they never reach the menu row */
        min-height: max(3.2rem, var(--wc-actions-h, 0px));
    }

    .header-layout-logo-above .site-logo .site-name,
    .header-layout-logo-above .site-logo-text {
        min-width: 0;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

/* the results page */
.search-page {
    padding: var(--spacing-8) var(--spacing-4);
}

.search-container {
    max-width: 48rem;
    margin: 0 auto;
}

.search-form {
    display: flex;
    gap: var(--spacing-2);
    margin: var(--spacing-4) 0 var(--spacing-6);
}

.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-text-muted);
    border-radius: var(--wc-btn-radius, var(--radius-md));
    background: var(--wc-background, var(--color-bg));
    color: var(--wc-text, var(--color-text));
    font-size: 1rem;
}

.search-hint,
.search-meta {
    color: var(--color-text-muted);
}

.search-group {
    margin-top: var(--spacing-8);
}

.search-group-count {
    font-weight: 400;
    color: var(--color-text-muted);
}

.search-results {
    margin: 0;
    padding: 0;
}

.search-result {
    overflow-wrap: anywhere;   /* a long word or address in a title or excerpt wraps instead of widening the page */
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.search-result h3 {
    margin: 0 0 var(--spacing-1);
    font-size: var(--font-size-lg);
}

.search-result h3 a {
    color: var(--wc-primary-text);
}

.search-result p {
    margin: var(--spacing-1) 0 0;
}

.search-tips {
    list-style: disc;
    margin: var(--spacing-3) 0 var(--spacing-3) var(--spacing-6);
    text-align: left;
}

.search-page mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
    box-shadow: inset 0 -0.4em 0 color-mix(in srgb, var(--wc-primary, currentColor) 25%, transparent);
}
/* END site search */


/* Theme: consultant */
/* Design tokens of the theme (theme.json) */
:root {
    --wc-radius: 10px;
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --wc-btn-radius: var(--radius-md);
    --wc-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);
    --container-max: 1160px;
    --wc-heading-weight: 700;
}
/* Consultant 2.0 - a trustworthy personal brand (docs/themes.md)
 *
 * Character: Raleway headings over Open Sans body, calm blue, rounded soft-shadow cards, a prominent header button,
 * a tinted hero panel with a gentle gradient, numbered feature cards, big-quote testimonial cards and a light grey footer.
 * All colours come from the variables (--color-primary, --wc-primary-text, --wc-on-primary, --color-bg-secondary ...);
 * tints are made with color-mix() so owner overrides keep working.
 * Hooks: body.wc-theme-consultant, body[data-header-layout], body.has-topbar, body.has-header-cta.
 */

:root {
    --co-tint: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg));
    --co-tint-2: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));
    --co-glow: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* ---- Base ---- */
body { line-height: 1.72; }

h1, h2, h3, h4, h5, h6,
.cb-content h1, .cb-content h2, .cb-content h3, .cb-content h4, .cb-content h5, .cb-content h6,
.wcs-title, .wcs-subtitle {
    font-weight: var(--wc-heading-weight, 700);
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--color-text);
}

a { text-underline-offset: 3px; }

:focus-visible {
    outline: 3px solid var(--wc-focus-ring, var(--wc-primary-text));
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
::selection { background: var(--co-tint-2); color: var(--color-text); }

/* ---- Top bar ---- */
.topbar { font-size: 0.8125rem; }
.topbar-inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* focus ring on the dark top bar */
.topbar a:focus-visible { outline-color: currentColor; }

/* ---- Header: white, soft shadow, prominent button ---- */
.site-header {
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--wc-header-border, var(--color-border)), var(--shadow-md);
}
.header-container { min-height: 84px; }

.site-logo {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.site-logo .site-name {
    background: none;
    -webkit-text-fill-color: currentColor;
}
.site-logo .site-name::first-letter { color: var(--wc-header-active, var(--wc-header-text)); }

.nav-menu { gap: 0 0.4rem; }
.nav-menu a:not(.btn) {
    position: relative;
    font-size: 0.9688rem;
    font-weight: 600;
    padding: 0.6rem 0.85rem;
    border-bottom: 0;
    transition: color var(--transition-fast);
}
/* a short bar under the current / hovered item */
.nav-menu > li > a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1.5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--color-primary);
    transform: translateX(-50%) scaleX(0);
    transition: transform var(--transition-fast);
}
.nav-menu > li > a:not(.btn):hover,
.nav-menu > li > a:not(.btn).active,
.nav-menu > li > a:not(.btn)[aria-current="page"] { color: var(--wc-header-active, var(--wc-header-text)); }
.nav-menu > li > a:not(.btn):hover::after,
.nav-menu > li:focus-within > a::after,
.nav-menu > li > a:not(.btn).active::after,
.nav-menu > li > a:not(.btn)[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.nav-menu > .has-children > a { padding-right: 1.3rem; }
.nav-menu > .has-children > a:not(.btn)::after {
    left: auto;
    right: 0.5rem;
    bottom: auto;
    top: 50%;
    width: 0.38em;
    height: 0.38em;
    margin-top: -0.28em;
    background: none;
    border-radius: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.nav-menu > .has-children > a:not(.btn):hover::after,
.nav-menu > .has-children:focus-within > a:not(.btn)::after,
.nav-menu > .has-children > a:not(.btn).active::after { transform: rotate(45deg); }

/* Dropdown: a rounded card with soft shadow */
.nav-menu .sub-menu {
    min-width: 15rem;
    padding: 0.5rem;
    border: 1px solid var(--wc-header-border, var(--color-border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.nav-menu .sub-menu a {
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-md);
    font-weight: 500;
}
.nav-menu .sub-menu a:hover { background: var(--wc-header-hover-bg, var(--co-tint)); color: var(--wc-header-active, var(--wc-header-text)); }

.header-actions { gap: 1rem; }
/* The call to action is the loudest thing in the header */
.header-cta {
    padding: 0.8rem 1.6rem;
    font-size: 0.9688rem;
    font-weight: 700;
    border-radius: var(--wc-btn-radius, var(--radius-md));
    box-shadow: 0 6px 16px -6px var(--co-glow);
}

/* Mobile menu */
@media (max-width: 900px) {
    .header-container { min-height: 70px; }
    .mobile-menu-toggle { padding: 0.75rem; margin-right: -0.75rem; }
    .main-nav { border-top: 1px solid var(--wc-header-border, var(--color-border)); padding: 0.75rem 1.25rem 2rem; }
    .nav-menu { gap: 0.15rem; }
    .nav-menu > li > a:not(.btn) { padding: 0.85rem 0.9rem; font-size: 1.05rem; border-radius: var(--radius-md); }
    .nav-menu > li > a:not(.btn)::after { display: none; }
    .nav-menu > li > a:not(.btn).active { background: var(--wc-header-hover-bg, var(--co-tint)); }
    .nav-menu > .has-children > a::after { display: none; }
    .nav-menu .sub-menu { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0 0 0.25rem 0.9rem; }
    .nav-menu .sub-menu a { padding: 0.6rem 0.9rem; font-weight: 500; }
    .nav-menu .nav-cta-item { margin-top: 1rem; }
    .nav-menu .nav-cta-item a.header-cta-mobile { display: flex; justify-content: center; width: 100%; font-weight: 700; padding: 0.95rem 1.5rem; }
}

/* ---- Buttons ---- */
.btn, button, input[type="submit"], input[type="button"],
.btn-primary, .btn-secondary, .btn-add-cart, .btn-checkout, .btn-place-order, .btn-continue, .btn-small,
.cb-content .is-btn, .cb-content a.is-btn, .wcf-submit {
    text-transform: none;
    letter-spacing: 0.005em;
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--wc-btn-radius, var(--radius-md));
    padding: 0.85rem 1.7rem;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn-primary, button[type="submit"], .btn-add-cart, .btn-checkout, .btn-place-order, .wcf-submit {
    box-shadow: 0 8px 18px -8px var(--co-glow);
}
.btn-primary:hover, button[type="submit"]:hover, .btn-add-cart:hover, .btn-checkout:hover, .btn-place-order:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -8px var(--co-glow);
}
.btn-secondary, .btn-continue,
.cb-content .is-btn.is-btn-ghost1, .cb-content a.is-btn.is-btn-ghost1 {
    background: var(--color-bg);
    color: var(--wc-secondary, var(--wc-primary-text));
    border: 2px solid var(--wc-secondary, var(--color-primary));
    box-shadow: none;
}
.btn-secondary:hover, .btn-continue:hover,
.cb-content .is-btn.is-btn-ghost1:hover, .cb-content a.is-btn.is-btn-ghost1:hover {
    background: var(--color-primary);
    color: var(--wc-on-primary);
    border-color: var(--color-primary);
}
.cb-content .is-btn { padding: 0.85rem 1.8rem; line-height: 1.55; }
.cb-content .is-btn.is-upper { text-transform: none; }
.cb-content a.btn { margin: 0.25rem 0.5rem 0.25rem 0; }
.wcs-grid ~ .btn, .post-list ~ .btn, .wcs-grid ~ p .btn { margin-top: 1.5rem; }

/* ---- Page content ---- */
.cb-page { padding-top: 2.5rem; }
.cb-content { font-size: 1.0625rem; }
.cb-content h1 { font-size: clamp(2.2rem, 4.3vw, 3.2rem); margin: 0.6rem 0 1.1rem; }
.cb-content h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); margin: 0.75rem 0; }
.cb-content h3 { font-size: 1.3rem; }

/* Hero: the first row becomes a calm tinted panel with a soft gradient */
.cb-content > .row:first-child {
    margin: 0 0 1.5rem;
    padding: 3rem 2.5rem;
    background:
        radial-gradient(60rem 24rem at 100% 0%, var(--co-tint-2), transparent 70%),
        linear-gradient(135deg, var(--co-tint), var(--color-bg-secondary));
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
    box-shadow: var(--shadow-sm);
}
.cb-content > .row:first-child img { box-shadow: var(--shadow-lg); }

/* eyebrow: a small tinted pill */
.cb-content .size-14.is-upper {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: var(--color-bg);
    border: 1px solid var(--co-tint-2);
    border-radius: 9999px;
    color: var(--wc-primary-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.cb-content .size-21 { color: var(--color-text-muted); line-height: 1.65; }
.cb-content .size-18 { color: var(--color-text-muted); }

.cb-content img { border-radius: var(--radius-lg); }
.cb-content img.circle { border-radius: 9999px; box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px var(--co-tint-2); }

/* Feature columns: numbered cards */
.cb-content { counter-reset: co-feature; }
.cb-content .row:has(> .column.third) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-left: 0;
    margin-right: 0;
}
.cb-content .row:has(> .column.third)::before,
.cb-content .row:has(> .column.third)::after { display: none; }
@media (max-width: 800px) {
    .cb-content .row:has(> .column.third) { grid-template-columns: 1fr; }
}
.cb-content .column.third {
    float: none;
    width: auto;
    counter-increment: co-feature;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 1.75rem 1.75rem 1.5rem;
    margin: 0;
}
.cb-content .column.third > h3::before {
    content: counter(co-feature);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--co-tint-2);
    color: var(--wc-primary-text);
    font-size: 1.05rem;
    font-weight: 800;
}
.cb-content .column.third > h3 { margin-top: 0; }
.cb-content ul li::marker { color: var(--wc-primary-text); }
.cb-content hr { border-top-color: var(--color-border); }
.cb-content table th { background: var(--co-tint); text-align: left; }
.cb-content table td, .cb-content table th { border-bottom: 1px solid var(--color-border); }

/* Testimonial: a card with a large quote mark */
.cb-content blockquote {
    position: relative;
    max-width: 46rem;
    margin: 2.5rem auto 1.25rem;
    padding: 3.25rem 2.5rem 2rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
    font-style: normal;
}
.cb-content blockquote::before {
    content: "\201C";
    position: absolute;
    top: 0.05em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-family-heading);
    font-size: 7rem;
    line-height: 1;
    font-weight: 800;
    color: var(--color-primary);
    opacity: 0.3;
    pointer-events: none;
}
.cb-content blockquote p { margin: 0; font-weight: 500; line-height: 1.6; }
.cb-content .center > p > img.circle { margin: 0.5rem auto 0.5rem; }

/* ---- Shop ---- */
.wcs-main { --wcs-radius: var(--radius-md); }
.wcs-title { font-size: clamp(1.9rem, 3.5vw, 2.5rem); }
.wcs-subtitle { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.wcs-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.wcs-card:hover, .wcs-card:focus-within { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.wcs-card-title { padding: 1rem 1.15rem 0.2rem; font-weight: 700; font-family: var(--font-family-heading); color: var(--color-text); }
.wcs-card-price { padding: 0 1.15rem 1.15rem; }
.wcs-price { font-size: 1.0625rem; font-weight: 700; color: var(--wc-primary-text); }
.wcs-badge { background: var(--color-primary); color: var(--wc-on-primary); border-radius: 9999px; padding: 0.2rem 0.75rem; font-weight: 700; }
.wcs-categories a.is-active { color: var(--wc-primary-text); font-weight: 700; }
.wcs-pagination a, .wcs-pagination span { border-radius: var(--radius-md); }
.wcs-summary, .wcs-radio { border-radius: var(--radius-lg); }
.product-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

/* ---- Blog ---- */
.blog-header h1, .blog-header h2, .post-header h1 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); margin-bottom: 1.5rem; }
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.75rem; margin-bottom: 2rem; }
.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.post-card:hover, .post-card:focus-within { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.post-card .post-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-tertiary); }
.post-card .post-image img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-content { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; margin-bottom: 0.6rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.post-category {
    padding: 0.15rem 0.7rem;
    border-radius: 9999px;
    background: var(--co-tint-2);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--wc-primary-text);
}
.post-card h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.post-card h2 a { color: var(--color-text); }
.post-card h2 a:hover { color: var(--wc-primary-text); }
.post-excerpt { color: var(--color-text-muted); margin: 0 0 1rem; }
.read-more { margin-top: auto; font-weight: 700; font-size: 0.9375rem; color: var(--wc-primary-text); }
.pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin: 1rem 0 2rem; }

.sidebar-widget {
    padding: 1.4rem;
    margin-bottom: 1.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.sidebar-widget h3 { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.category-list a { display: flex; justify-content: space-between; padding: 0.4rem 0; color: var(--color-text); }
.category-list a.active, .category-list a:hover { color: var(--wc-primary-text); }
.category-list .count { color: var(--color-text-muted); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { padding: 0.25rem 0.8rem; font-size: 0.8125rem; background: var(--co-tint); border: 1px solid var(--co-tint-2); border-radius: 9999px; color: var(--color-text); }
.tag:hover, .tag.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--wc-on-primary); }
.blog-post .featured-image img { border-radius: var(--radius-xl); }

/* ---- Forms: a card on a tinted ground ---- */
.wcf {
    padding: 2rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.wcf-field > label, .wcf-field > fieldset > legend, .wcs-label { font-weight: 600; font-size: 0.9375rem; }
.wcf input[type="text"], .wcf input[type="email"], .wcf input[type="tel"], .wcf input[type="number"], .wcf input[type="date"],
.wcf select, .wcf textarea,
.wcs-main input[type="text"], .wcs-main input[type="email"], .wcs-main input[type="tel"], .wcs-main input[type="search"],
.wcs-main input[type="number"], .wcs-main select {
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    padding: 0.75rem 0.95rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wcf input:focus-visible, .wcf select:focus-visible, .wcf textarea:focus-visible {
    outline: 2px solid var(--wc-focus-ring, var(--color-primary));
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--co-tint-2), 0 0 0 1px var(--color-primary);
}

/* ---- Footer: light grey, dark text ---- */
.site-footer { margin-top: 5rem; border-top: 1px solid var(--wc-footer-border, var(--color-border)); box-shadow: none; }
.footer-container { padding-top: 3.75rem; padding-bottom: 1.75rem; }
.footer-widgets { gap: 2.5rem 3rem; }
.footer-widget h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; margin-bottom: 1rem; }
.footer-links a, .footer-about .footer-contact a { text-underline-offset: 3px; }
.footer-links a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--wc-focus-ring-footer, currentColor); }
.footer-hours li { padding: 0.3rem 0; border-bottom: 1px solid var(--wc-footer-border, rgba(100, 116, 139, 0.25)); }
/* closed days: quiet but readable (the base dims them with opacity, which drops below 4.5:1) */
.social-link { border-radius: 9999px; background: var(--wc-footer-social-bg, var(--color-bg)); box-shadow: var(--shadow-sm); }
.footer-bottom { font-size: 0.875rem; padding-top: 1.5rem; }
@media (min-width: 1001px) {
    .footer-widgets { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
    .footer-widgets > .footer-widget:nth-child(n+5) { grid-column: 1 / -1; }
}

/* ---- Small screens ---- */
@media (max-width: 700px) {
    .cb-page { padding-top: 1.25rem; }
    .cb-content > .row:first-child { padding: 1.75rem 1.1rem; }
    .cb-content blockquote { padding: 3rem 1.25rem 1.5rem; }
    .cb-content .column.third { padding: 1.4rem 1.25rem 1.2rem; }
    .wcf { padding: 1.15rem; }
    .post-list { grid-template-columns: 1fr; }
    .footer-container { padding-top: 2.75rem; }
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .btn-primary:hover, .wcs-card:hover, .post-card:hover { transform: none; }
}

.cb-content .center img { margin-left: auto; margin-right: auto; }

/* Site settings (theme builder): generated by WebCreator, do not edit */
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("/themes/_fonts/lato-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("/themes/_fonts/lato-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato Fallback";font-style:normal;font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");size-adjust:84.79%;ascent-override:116.41%;descent-override:25.12%;line-gap-override:0%}
@font-face{font-family:"Lato Fallback";font-style:normal;font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");size-adjust:76.87%;ascent-override:128.4%;descent-override:27.71%;line-gap-override:0%}
@font-face{font-family:"Raleway";font-style:normal;font-weight:400;font-display:swap;src:url("/themes/_fonts/raleway-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";font-style:normal;font-weight:600;font-display:swap;src:url("/themes/_fonts/raleway-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";font-style:normal;font-weight:700;font-display:swap;src:url("/themes/_fonts/raleway-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway";font-style:normal;font-weight:800;font-display:swap;src:url("/themes/_fonts/raleway-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Raleway Fallback";font-style:normal;font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Nimbus Sans");size-adjust:91.34%;ascent-override:102.91%;descent-override:25.62%;line-gap-override:0%}
@font-face{font-family:"Raleway Fallback";font-style:normal;font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Liberation Sans Bold"),local("Nimbus Sans Bold");size-adjust:83.48%;ascent-override:112.6%;descent-override:28.03%;line-gap-override:0%}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("/themes/_fonts/inter-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root,
body {
    --wc-font-body: "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family: "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wc-font-heading: "Raleway", "Raleway Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: "Raleway", "Raleway Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wc-text: #4a4a4a;
    --text: #4a4a4a;
    --color-text: #4a4a4a;
    --color-text-muted: #727272;
    --color-text-light: #707070;
    --wc-background: #ffffff;
    --wc-bg: #ffffff;
    --color-bg: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f6f6f6;
    --color-border: #ebebeb;
    --color-border-dark: #dddddd;
    --wc-primary: #6bae2a;
    --primary: #6bae2a;
    --color-primary: #6bae2a;
    --color-primary-dark: #599123;
    --color-primary-light: #c4dfaa;
    --color-primary-50: rgba(107, 174, 42, 0.1);
    --wc-on-primary: #111111;
    --color-on-primary: #111111;
    --wc-primary-hover: #599123;
    --wc-on-primary-hover: #111111;
    --wc-primary-text: #49761d;
    --wc-primary-text-hover: #3a5e17;
    --wc-focus-ring: #568b22;
    --wc-secondary: #334155;
    --wc-on-secondary: #ffffff;
    --secondary: #334155;
    --wc-cta-bg: #6bae2a;
    --wc-cta-bg-hover: #599123;
    --wc-on-cta: #111111;
    --wc-on-cta-hover: #111111;
    --wc-header-bg: #ffffff;
    --wc-header-text: #444444;
    --wc-header-border: #e5e5e5;
    --wc-header-hover-bg: rgba(68, 68, 68, 0.08);
    --wc-header-active: #49761d;
    --wc-focus-ring-header: #568b22;
    --wc-name-bg: none;
    --wc-name-fill: currentColor;
    --wc-tagline-opacity: 0.8;
    --wc-footer-bg: #1e2024;
    --wc-footer-text: #e5e5e5;
    --wc-footer-muted: #a9aaab;
    --wc-footer-subtle: #8b8c8e;
    --wc-footer-border: #3e4043;
    --wc-footer-social-bg: #36383b;
    --wc-footer-hover-decoration: underline;
    --wc-focus-ring-footer: #6bae2a;
}
body{font-family:var(--font-family)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading)}
html{font-size:87.5%}