:root {
    --johku-border-radius: 12px;
    --johku-border-radius-button: 12px;
    --johku-border-radius-button-sm: 12px;
    --johku-border-radius-image: 12px;
    --johku-border-radius-image-sm: 12px;
    --johku-border-radius-input: 5px;
    --johku-border-radius-input-sm: 5px;
    --johku-border-radius-sm: 12px;
    --johku-color-background: #FFFFFF;
    --johku-color-background-tint: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-black: #000000;
    --johku-color-black-tint: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-blockshadow: #000000;
    --johku-color-border: #f6f6f6;
    --johku-color-breadcrumb-background: color-mix(in oklab, #6A9E29, #000000 15%);
    --johku-color-breadcrumb-text: #FFFFFF;
    --johku-color-breadcrumb-text-link: #FFFFFF;
    --johku-color-button-black-background: #000000;
    --johku-color-button-black-background-hover: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-button-black-border: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-button-black-border-hover: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-button-black-text: #FFFFFF;
    --johku-color-button-black-text-hover: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-button-close-background: #000000;
    --johku-color-button-close-background-hover: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-button-close-border: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-button-close-border-hover: color-mix(in oklab, #000000, #000000 10%);
    --johku-color-button-close-text: #FFFFFF;
    --johku-color-button-close-text-hover: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-button-default-background: #E0E0E0;
    --johku-color-button-default-background-hover: color-mix(in oklab, #E0E0E0, #000000 10%);
    --johku-color-button-default-border: color-mix(in oklab, #E0E0E0, #000000 10%);
    --johku-color-button-default-border-hover: color-mix(in oklab, #E0E0E0, #000000 10%);
    --johku-color-button-default-text: #000000;
    --johku-color-button-default-text-hover: color-mix(in oklab, #000000, #000000 5%);
    --johku-color-button-error-text: #FFFFFF;
    --johku-color-button-error-text-hover: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-button-info-background: #00d3c4;
    --johku-color-button-info-background-hover: color-mix(in oklab, #00d3c4, #000000 10%);
    --johku-color-button-info-border: color-mix(in oklab, #00d3c4, #000000 10%);
    --johku-color-button-info-border-hover: color-mix(in oklab, #00d3c4, #000000 10%);
    --johku-color-button-info-text: #000000;
    --johku-color-button-info-text-hover: color-mix(in oklab, #000000, #000000 5%);
    --johku-color-button-primary-background: #6A9E29;
    --johku-color-button-primary-background-hover: color-mix(in oklab, #6A9E29, #000000 10%);
    --johku-color-button-primary-border: color-mix(in oklab, #6A9E29, #000000 10%);
    --johku-color-button-primary-border-hover: color-mix(in oklab, #6A9E29, #000000 10%);
    --johku-color-button-primary-text: #FFFFFF;
    --johku-color-button-primary-text-hover: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-button-secondary-background: #01B5DD;
    --johku-color-button-secondary-background-hover: color-mix(in oklab, #01B5DD, #000000 10%);
    --johku-color-button-secondary-border: color-mix(in oklab, #01B5DD, #000000 10%);
    --johku-color-button-secondary-border-hover: color-mix(in oklab, #01B5DD, #000000 10%);
    --johku-color-button-success-background: #00840F;
    --johku-color-button-success-background-hover: color-mix(in oklab, #00840F, #000000 10%);
    --johku-color-button-success-border: color-mix(in oklab, #00840F, #000000 10%);
    --johku-color-button-success-border-hover: color-mix(in oklab, #00840F, #000000 10%);
    --johku-color-button-success-text: #FFFFFF;
    --johku-color-button-success-text-hover: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-button-text: #FFFFFF;
    --johku-color-button-warning-background: #FFCA2B;
    --johku-color-button-warning-background-hover: color-mix(in oklab, #FFCA2B, #000000 10%);
    --johku-color-button-warning-border: color-mix(in oklab, #FFCA2B, #000000 10%);
    --johku-color-button-warning-border-hover: color-mix(in oklab, #FFCA2B, #000000 10%);
    --johku-color-button-warning-text: #000000;
    --johku-color-button-warning-text-hover: color-mix(in oklab, #000000, #000000 5%);
    --johku-color-button-white-background: #FFFFFF;
    --johku-color-button-white-background-hover: color-mix(in oklab, #FFFFFF, #000000 10%);
    --johku-color-button-white-border: color-mix(in oklab, #FFFFFF, #000000 10%);
    --johku-color-button-white-border-hover: color-mix(in oklab, #FFFFFF, #000000 10%);
    --johku-color-button-white-text: #000000;
    --johku-color-button-white-text-hover: color-mix(in oklab, #000000, #000000 5%);
    --johku-color-default: #E0E0E0;
    --johku-color-default-tint: color-mix(in oklab, #E0E0E0, #000000 10%);
    --johku-color-dropdown-background: #FFFFFF;
    --johku-color-error: #8C0000;
    --johku-color-error-tint: color-mix(in oklab, #8C0000, #000000 10%);
    --johku-color-footer-background: #000000;
    --johku-color-footer-bar-background: #212121;
    --johku-color-footer-bar-link: #FFFFFF;
    --johku-color-footer-bar-text: #FFFFFF;
    --johku-color-footer-link: #FFFFFF;
    --johku-color-footer-text: #FFFFFF;
    --johku-color-grid-price-background: #FFFFFF;
    --johku-color-grid-price-text: #000000;
    --johku-color-image-text-shadow: #000000;
    --johku-color-image-text-shadow-a10: color-mix(in srgb, #000000, transparent 10%);
    --johku-color-image-text-shadow-a25: color-mix(in srgb, #000000, transparent 25%);
    --johku-color-image-text-shadow-a50: color-mix(in srgb, #000000, transparent 50%);
    --johku-color-image-text-shadow-a75: color-mix(in srgb, #000000, transparent 75%);
    --johku-color-image-text-shadow-a90: color-mix(in srgb, #000000, transparent 90%);
    --johku-color-info: #00d3c4;
    --johku-color-info-tint: color-mix(in oklab, #00d3c4, #000000 10%);
    --johku-color-input-background: color-mix(in oklab, #FFFFFF, #000000 5%);
    --johku-color-input-placeholder: color-mix(in oklab, #000000, #000000 5%);
    --johku-color-input-text: #000000;
    --johku-color-largeimage-text: #FFFFFF;
    --johku-color-largeimage-text-title: #FFFFFF;
    --johku-color-modal-background: #FFFFFF;
    --johku-color-navbar-background: #fff;
    --johku-color-navbar-cart-count-background: #6A9E29;
    --johku-color-navbar-cart-count-text: #fff;
    --johku-color-navbar-dropdown-background: #fff;
    --johku-color-navbar-dropdown-link: #000;
    --johku-color-navbar-dropdown-link-hover: color-mix(in srgb, #000, #fff 15%);
    --johku-color-navbar-dropdown-text: #455A64;
    --johku-color-navbar-dropdown-title: #6A9E29;
    --johku-color-navbar-dropdown-title-hover: color-mix(in srgb, #6A9E29, #fff 15%);
    --johku-color-navbar-text: #000;
    --johku-color-navbar-transparent-text: #FFFFFF;
    --johku-color-orderwrap-background: color-mix(in oklab, #6A9E29, #FFFFFF 70%);
    --johku-color-orderwrap-background-dim: #6A9E29;
    --johku-color-orderwrap-input-background: #FFFFFF;
    --johku-color-orderwrap-input-text: #000000;
    --johku-color-orderwrap-text: #000000;
    --johku-color-orderwrap-text-link: #6A9E29;
    --johku-color-orderwrap-text-price: #6A9E29;
    --johku-color-orderwrap-text-title: #6A9E29;
    --johku-color-pagetabs-orderwrap-text: #000000;
    --johku-color-pagetabs-page-text: #000000;
    --johku-color-panel-background: #FFF;
    --johku-color-panel-border: #f6f6f6;
    --johku-color-panel-text: #000;
    --johku-color-panel-title-background: color-mix(in oklab, #FFF, #000 5%);
    --johku-color-panel-title-text: #000;
    --johku-color-primary: #6A9E29;
    --johku-color-primary-tint: color-mix(in oklab, #6A9E29, #000000 10%);
    --johku-color-secondary: #01B5DD;
    --johku-color-secondary-tint: color-mix(in oklab, #01B5DD, #000000 10%);
    --johku-color-shadow: color-mix(in oklab, #FFFFFF, #000000 30%);
    --johku-color-shadow-a20: color-mix(in srgb, #000000, transparent 20%);
    --johku-color-shadow-a33: color-mix(in srgb, #000000, transparent 33%);
    --johku-color-shadow-a50: color-mix(in srgb, #000000, transparent 50%);
    --johku-color-shadow-a66: color-mix(in srgb, #000000, transparent 66%);
    --johku-color-shadow-a80: color-mix(in srgb, #000000, transparent 80%);
    --johku-color-shadow-a90: color-mix(in srgb, #000000, transparent 90%);
    --johku-color-shadow-base: #000000;
    --johku-color-success: #00840F;
    --johku-color-success-tint: color-mix(in oklab, #00840F, #000000 10%);
    --johku-color-text: #000000;
    --johku-color-text-link: #01B5DD;
    --johku-color-text-title: #3C8BD9;
    --johku-color-titlebar-background: #679F38;
    --johku-color-titlebar-text-shadow: #000000;
    --johku-color-titlebar-text-shadow-a10: color-mix(in srgb, #000000, transparent 10%);
    --johku-color-titlebar-text-shadow-a25: color-mix(in srgb, #000000, transparent 25%);
    --johku-color-titlebar-text-shadow-a50: color-mix(in srgb, #000000, transparent 50%);
    --johku-color-titlebar-text-shadow-a75: color-mix(in srgb, #000000, transparent 75%);
    --johku-color-titlebar-text-shadow-a90: color-mix(in srgb, #000000, transparent 90%);
    --johku-color-titlebar-text-title: #FFFFFF;
    --johku-color-warning: #FFCA2B;
    --johku-color-warning-tint: color-mix(in oklab, #FFCA2B, #000000 10%);
    --johku-color-white: #FFFFFF;
    --johku-color-white-tint: color-mix(in oklab, #FFFFFF, #000000 10%);
    --johku-font-awesome: "Font Awesome 7 Pro";
    --johku-font-button: "Rethink Sans", sans-serif;
    --johku-font-main: "Rethink Sans", sans-serif;
    --johku-font-title: "Rethink Sans", sans-serif;
    --johku-footer-nav-columns: 3;
    --johku-footer-nav-separator: rgba(255,255,255,0.25);
    --johku-navbar-height: 70px;
    --johku-navbar-mobile-height: 70px;
    --johku-r-button: 12px;
    --johku-r-image: 12px;
    --johku-r-input: 5px;
}

/* Demo notice: Johkula demo shop. Pinned to the bottom of the screen so it never covers the top bar. */
body {
    padding-bottom: 40px;
}
body::after {
    content: "Tämä on Johkun esittelykauppa – varaukset eivät ole oikeita. This is a Johku demo shop – bookings are not real. · johku.fi";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    padding: 8px 12px;
    background: #cbdc3a;
    color: #1c2733;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
}
@media (max-width: 767px) {
    body {
        padding-bottom: 64px;
    }
    body::after {
        font-size: 12px;
        padding: 6px 10px;
    }
}
html[lang="fi"] body::after {
    content: "Tämä on Johkun esittelykauppa – varaukset eivät ole oikeita. · johku.fi";
}
html[lang="en"] body::after {
    content: "This is a Johku demo shop – bookings are not real. · johku.fi";
}