/* @johku-preset */
/* Scheme `variables` on the next stylesheet stack (JDEV-3215): the shop's colours come from public.css (its
   storefrontcss), the base tokens are the Light ones (shared/styles/tokens.css). These are the rules of the legacy
   johkustore-colors-variables.css that the next stack's CSS does not already apply with the same tokens:
   measured on the visual suite's pages (Light, Dark, tervarumpu), plus the ones no suite page shows (datepicker
   days, cart, order and option panels). Unlayered like the storefront sections (assets/css/sections/README.md). */
html > body {
  background-color: var(--johku-color-background-tint);
}
#__layout {
  background-color: var(--johku-color-background);
}
:root body .dp__theme_light {
  --dp-highlight-color: var(--johku-color-success);
  --dp-primary-color: var(--johku-color-primary);
  --dp-reserved-text-color: var(--johku-color-danger);
}
body .h1,
body .h2,
body .h3,
body .h4,
body .h5,
body .h6,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--johku-color-text-title);
}
body .navbar-default:not(.transparent) .navbar-nav > li > a,
body .navbar-default:not(.transparent) .navbar-nav .navbar-text {
  color: var(--johku-color-navbar-text);
}
body .navbar-default.transparent.navbar-nav > li > a,
body .navbar-default.transparent .navbar-default .navbar-text {
  color: var(--johku-color-navbar-transparent-text);
}
body .navbar-main .dropdown-menu {
  background-color: var(--johku-color-navbar-dropdown-background);
}
body .menu-grid .menu-title {
  color: var(--johku-color-navbar-dropdown-title);
}
body .menu-grid .menu-title:hover {
  color: var(--johku-color-navbar-dropdown-title-hover);
}
body .panel-default > .panel-heading {
  border-bottom-color: var(--johku-color-panel-border);
}
body .panel-heading h1,
body .panel-heading h2,
body .panel-heading h3,
body .panel-heading h4,
body .panel-heading h5,
body .panel-heading h6 {
  color: var(--johku-color-panel-title-text);
}
body .product-order-wrap .panel-heading a:not(.btn):not(.js-grid-item) {
  color: var(--johku-color-panel-title-text);
}
body .panel-default > .panel-heading {
  background-color: var(--johku-color-panel-title-background);
}
body .panel-default {
  border-color: var(--johku-color-panel-border);
}
body .panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: var(--johku-color-panel-border);
}
body .panel,
body .modal-content {
  --johku-color-border: var(--johku-color-panel-border);
  --johku-color-background: var(--johku-color-panel-background);
  --johku-color-background-tint: color-mix(in oklab, var(--johku-color-panel-background), #000 5%);
  --johku-color-shadow-a33: transparent;
  background-color: var(--johku-color-panel-background);
  color: var(--johku-color-panel-text);
}
body .panel a:not(.btn):not(.js-grid-item):not(.modal-close):not(.store-lightbox-link),
body .modal-content a:not(.btn):not(.js-grid-item):not(.modal-close):not(.store-lightbox-link) {
  color: var(--johku-color-panel-text-link);
}
body .panel .js-grid-item,
body .modal-content .js-grid-item {
  color: var(--johku-color-panel-text);
}
body .panel .product-content-infotitle,
body .modal-content .product-content-infotitle {
  border-color: var(--johku-color-panel-border);
}
body .panel h1,
body .modal-content h1,
body .panel h2,
body .modal-content h2,
body .panel h3,
body .modal-content h3,
body .panel h4,
body .modal-content h4 {
  color: var(--johku-color-panel-text);
}
body .panel .page-header-bar h1,
body .modal-content .page-header-bar h1,
body .panel .carousel-title h1,
body .modal-content .carousel-title h1,
body .panel .page-header-bar h2,
body .modal-content .page-header-bar h2,
body .panel .carousel-title h2,
body .modal-content .carousel-title h2,
body .panel .page-header-bar h3,
body .modal-content .page-header-bar h3,
body .panel .carousel-title h3,
body .modal-content .carousel-title h3,
body .panel .page-header-bar h4,
body .modal-content .page-header-bar h4,
body .panel .carousel-title h4,
body .modal-content .carousel-title h4 {
  color: var(--johku-color-titlebar-text-title);
}
body .panel .product-showimages-button .store-lightbox-link span,
body .modal-content .product-showimages-button .store-lightbox-link span {
  color: inherit;
}
body .panel-title:not(.modal-title),
body .modal-title:not(.modal-title) {
  background-color: var(--johku-color-panel-title-background);
}
body .order-deliverymethod-list .list-group-item,
body .payment-methods .list-group-item {
  border-color: var(--johku-color-border);
}
.product-order-wrap .product-merchant-detail a,
.product-order-wrap a.product-merchant-detail {
  color: var(--johku-color-orderwrap-text-link);
}
.product-order-wrap .options-group,
.product-order-wrap .options-group .product-order-wrap {
  color: var(--johku-color-panel-text);
}
.product-order-wrap .options-group a:not(.btn) {
  color: var(--johku-color-text-link);
}
.js-main-title h1 {
  background-color: var(--johku-color-titlebar-text);
}
.cart-shoptitle,
.cart-shoptitle h4 {
  color: var(--johku-color-navbar-dropdown-text);
}
.js-cart-title {
  color: var(--johku-color-navbar-dropdown-text-title);
}
.js-cart-merchant-title {
  color: var(--johku-color-navbar-dropdown-text-title);
}
body .product-pricingtype-active:not(.btn) {
  background-color: var(--johku-color-button-pricingtype-active-background);
  box-shadow: inset 0px 2px 0px var(--johku-color-shadow-a90);
}
.product-order-cleardates:after {
  background-color: var(--johku-color-orderwrap-button-primary-background);
  color: var(--johku-color-orderwrap-button-primary-text);
}
.product-merchant-title {
  color: var(--johku-color-orderwrap-text-title);
}
.product-order-disclaimer a {
  color: var(--johku-color-orderwrap-text-link);
}
.product-extras-title {
  color: var(--johku-color-orderwrap-text-title);
}
.product-content-infolabel {
  font-weight: bold;
  color: var(--johku-color-text-title);
}
.order-merchant-wrappertitle {
  color: var(--johku-color-text-title);
}
.order-merchant-detailswrap {
  background-color: var(--johku-color-orderwrap-background);
}
.order-merchant-detailswrap,
.order-merchant-detailswrap a {
  color: var(--johku-color-orderwrap-text);
}
.order-merchant-totaltitle,
.order-merchant-totalsum {
  color: var(--johku-color-text-title);
}
.js-footer-navi {
  background-color: var(--johku-color-footer-background);
}
body .js-footer-navi h1,
body .js-footer-navi h2,
body .js-footer-navi h3,
body .js-footer-navi h4 {
  color: var(--johku-color-footer-text-title);
}
body footer h1,
body footer h2,
body footer h3,
body footer h4 {
  color: var(--johku-color-footer-bar-text-title);
}
body footer a:not(.btn) {
  color: var(--johku-color-footer-bar-link);
}
body footer a:not(.btn):hover {
  color: var(--johku-color-footer-bar-link-hover);
}
.bar-colored-title {
  color: var(--johku-color-text-title);
}
.page-header-bar {
  background-color: var(--johku-color-titlebar-background);
}
.page-header-bar.product-header-bar {
  background-color: var(--johku-color-titlebar-background);
}
.datepicker .selectable,
.datetimepicker .selectable,
.calendar .selectable,
.datepicker .selectable a,
.datetimepicker .selectable a,
.calendar .selectable a {
  color: #FFF !important;
  background-color: #76B841 !important;
  background-image: none !important;
  box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
}
.datepicker .notselectable,
.datetimepicker .notselectable,
.calendar .notselectable,
.datepicker .reservable,
.datetimepicker .reservable,
.calendar .reservable {
  color: #507D2B !important;
  background-image: none !important;
  background-color: #FFF !important;
  font-weight: bold;
}
.datepicker .active,
.datetimepicker .active,
.calendar .active,
.datepicker .selectable.active,
.datetimepicker .selectable.active,
.calendar .selectable.active,
.datepicker .active a,
.datetimepicker .active a,
.calendar .active a,
.datepicker .selectable.active a,
.datetimepicker .selectable.active a,
.calendar .selectable.active a {
  color: #FFF !important;
  background-color: #3C8BD9 !important;
  background-image: none !important;
}
.datepicker .reserved,
.datetimepicker .reserved,
.calendar .reserved,
.datepicker .reserved a,
.datetimepicker .reserved a,
.calendar .reserved a {
  color: #B71C1C !important;
  background-color: #FCE4EC !important;
  background-image: none !important;
}
.datepicker .partial,
.datetimepicker .partial,
.calendar .partial,
.datepicker .part-free,
.datetimepicker .part-free,
.calendar .part-free,
.datepicker .part-reserved,
.datetimepicker .part-reserved,
.calendar .part-reserved,
.datepicker .activeish,
.datetimepicker .activeish,
.calendar .activeish,
.datepicker .partial a,
.datetimepicker .partial a,
.calendar .partial a,
.datepicker .part-free a,
.datetimepicker .part-free a,
.calendar .part-free a,
.datepicker .part-reserved a,
.datetimepicker .part-reserved a,
.calendar .part-reserved a,
.datepicker .activeish a,
.datetimepicker .activeish a,
.calendar .activeish a {
  color: #FFF !important;
  background-color: #679F38 !important;
  background-image: none !important;
  box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
}
.background-a {
  background-color: var(--johku-color-primary) !important;
}
.background-b {
  background-color: var(--johku-color-secondary) !important;
}
.background-c {
  background-color: var(--johku-color-success) !important;
}
.background-d {
  background-color: var(--johku-color-primary) !important;
}
.border-a {
  border-color: var(--johku-color-primary) !important;
}
.border-b {
  border-color: var(--johku-color-secondary) !important;
}
.border-c {
  border-color: var(--johku-color-success) !important;
}
.border-d {
  border-color: var(--johku-color-primary) !important;
}
.product-tabs-wrapper {
  background-color: var(--johku-color-orderwrap-background-dim);
}
.product-tabs-wrapper .product-tab a {
  color: var(--johku-color-pagetabs-orderwrap-text);
}
/* The hovered or focused tab and the active one (the section in view, .active from the scroll spy) as on legacy */
.product-tabs-wrapper .product-tab a:focus,
.product-tabs-wrapper .product-tab a:active,
.product-tabs-wrapper .product-tab a:hover,
.product-tabs-wrapper .product-tab.active a {
  background-color: var(--johku-color-orderwrap-background);
  color: var(--johku-color-orderwrap-text);
}
.product-tabs-wrapper[stuck] {
  background-color: var(--johku-color-orderwrap-background);
}
.product-tabs-wrapper[stuck] .product-tab-name,
.product-tabs-wrapper[stuck] .product-tab-name a {
  color: var(--johku-color-pagetabs-page-text);
}
.product-tabs-wrapper[stuck] .product-tab a {
  color: var(--johku-color-pagetabs-page-text);
}
.product-tabs-wrapper[stuck] .product-tab a:focus,
.product-tabs-wrapper[stuck] .product-tab a:active,
.product-tabs-wrapper[stuck] .product-tab a:hover,
.product-tabs-wrapper[stuck] .product-tab.active a {
  background-color: var(--johku-color-background);
  color: var(--johku-color-text);
}