/* Verlan Mökit: aligns the storefront with verla.fi (Valve). Design System "Verla".
   Carries the whole Verla look: fonts, theme variables, then rules.
   No child selectors, no properties containing the sanitizer's trigger word. */

:root {
  --johku-font-main: Spectral, sans-serif;
  --johku-font-title: Spectral, sans-serif;
  --johku-font-button: Raleway, sans-serif;
  --johku-font-title-transform: uppercase;
  --johku-font-button-transform: uppercase;

  --johku-color-primary: #923a21;
  --johku-color-primary-tint: #682918;
  --johku-color-secondary: #863527;
  --johku-color-secondary-tint: #682918;
  --johku-color-background: #f9f9f9;
  --johku-color-background-tint: #f2f0ed;
  --johku-color-modal-background: #ffffff;
  --johku-color-dropdown-background: #ffffff;
  --johku-color-text: #222222;
  --johku-color-text-title: #923a21;
  --johku-color-text-link: #923a21;
  --johku-color-border: #ededed;
  --johku-color-default: #ffffff;
  --johku-color-default-tint: #ffffff;
  --johku-color-success: #923a21;
  --johku-color-success-tint: #682918;
  --johku-color-warning: #FFCA2B;
  --johku-color-error: #b20602;
  --johku-color-error-tint: #8c0502;
  --johku-color-danger: #b20602;
  --johku-color-danger-tint: #8c0502;
  --johku-color-info: #09606c;
  --johku-color-info-tint: #074b55;
  --johku-color-black: #000000;
  --johku-color-white: #ffffff;

  --johku-color-input-background: #ffffff;
  --johku-color-input-text: #222222;
  --johku-color-input-placeholder: #666666;
  --johku-color-orderwrap-background: #ffffff;
  --johku-color-orderwrap-background-dim: #f2f0ed;
  --johku-color-orderwrap-input-background: #ffffff;
  --johku-color-orderwrap-input-text: #222222;
  --johku-color-orderwrap-text: #222222;
  --johku-color-orderwrap-text-title: #923a21;
  --johku-color-orderwrap-text-link: #923a21;
  --johku-color-orderwrap-text-price: #923a21;
  --johku-color-pagetabs-page-text: #111111;
  --johku-color-pagetabs-orderwrap-text: #111111;

  --johku-color-navbar-background: #ffffff;
  --johku-color-navbar-text: #111111;
  --johku-color-navbar-transparent-text: #ffffff;
  --johku-color-navbar-dropdown-background: #ffffff;
  --johku-color-navbar-dropdown-title: #923a21;
  --johku-color-navbar-dropdown-text: #222222;
  --johku-color-navbar-dropdown-link: #222222;
  --johku-color-navbar-cart-count-background: #923a21;
  --johku-color-navbar-cart-count-text: #ffffff;

  --johku-color-breadcrumb-background: #f1efec;
  --johku-color-breadcrumb-text: #863527;
  --johku-color-breadcrumb-text-link: #863527;
  --johku-color-titlebar-background: #923a21;
  --johku-color-titlebar-text-title: #ffffff;
  --johku-color-grid-price-background: #ffffff;
  --johku-color-grid-price-text: #923a21;
  --johku-color-panel-background: #ffffff;
  --johku-color-panel-text: #222222;
  --johku-color-panel-border: #ededed;
  --johku-color-largeimage-text: #ffffff;
  --johku-color-image-text-shadow: #000000;

  --johku-color-footer-background: #f1efec;
  --johku-color-footer-text: #111111;
  --johku-color-footer-link: #863527;
  --johku-color-footer-bar-background: #f1efec;
  --johku-color-footer-bar-text: #111111;
  --johku-color-footer-bar-link: #111111;
  --johku-footer-nav-columns: 3;
  --johku-footer-nav-separator: rgba(134, 53, 39, .2);

  --johku-color-button-text: #ffffff;
  --johku-color-button-primary-background: #923a21;
  --johku-color-button-primary-border: #923a21;
  --johku-color-button-primary-text: #ffffff;
  --johku-color-button-primary-background-hover: #682918;
  --johku-color-button-primary-border-hover: #682918;
  --johku-color-button-primary-text-hover: #ffffff;
  --johku-color-button-success-background: #923a21;
  --johku-color-button-success-border: #923a21;
  --johku-color-button-success-text: #ffffff;
  --johku-color-button-success-background-hover: #682918;
  --johku-color-button-success-border-hover: #682918;
  --johku-color-button-success-text-hover: #ffffff;
  --johku-color-button-secondary-background: #863527;
  --johku-color-button-secondary-border: #863527;
  --johku-color-button-secondary-text: #ffffff;
  --johku-color-button-secondary-background-hover: #682918;
  --johku-color-button-secondary-border-hover: #682918;
  --johku-color-button-default-background: #ffffff;
  --johku-color-button-default-border: #923a21;
  --johku-color-button-default-text: #923a21;
  --johku-color-button-default-background-hover: #f2f0ed;
  --johku-color-button-default-border-hover: #682918;
  --johku-color-button-default-text-hover: #682918;
  --johku-color-button-white-text: #923a21;
  --johku-color-button-error-background: #b20602;
  --johku-color-button-error-border: #b20602;
  --johku-color-button-error-text: #ffffff;
  --johku-color-button-danger-background: #b20602;
  --johku-color-button-danger-border: #b20602;
  --johku-color-button-danger-text: #ffffff;
  --johku-color-button-danger-background-hover: #8c0502;
  --johku-color-button-danger-border-hover: #8c0502;
  --johku-color-button-danger-text-hover: #ffffff;

  --johku-border-radius: 0;
  --johku-border-radius-button: 0;
  --johku-border-radius-input: 0;
  --johku-border-radius-image: 0;
  --johku-border-radius-sm: 0;
  --johku-border-radius-button-sm: 0;
  --johku-border-radius-input-sm: 0;
  --johku-border-radius-image-sm: 0;
  --johku-navbar-height: 70px;
  --johku-navbar-mobile-height: 70px;
}

/* Fonts: served by Johku from the Verla scheme folder */
@font-face { font-family: "Raleway"; font-weight: 500; font-style: normal; src: url("/scheme/verla/fonts/raleway-medium.woff2") format("woff2"), url("/scheme/verla/fonts/raleway-medium.woff") format("woff"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-style: normal; src: url("/scheme/verla/fonts/raleway-regular.woff2") format("woff2"), url("/scheme/verla/fonts/raleway-regular.woff") format("woff"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-style: normal; src: url("/scheme/verla/fonts/raleway-semibold.woff2") format("woff2"), url("/scheme/verla/fonts/raleway-semibold.woff") format("woff"); }
@font-face { font-family: "Spectral"; font-weight: 400; font-style: normal; font-display: swap; src: url("/scheme/verla/fonts/subset-Spectral-Regular.woff2") format("woff2"), url("/scheme/verla/fonts/subset-Spectral-Regular.woff") format("woff"); }
@font-face { font-family: "Spectral"; font-weight: 400; font-style: italic; font-display: swap; src: url("/scheme/verla/fonts/subset-Spectral-Italic.woff2") format("woff2"), url("/scheme/verla/fonts/subset-Spectral-Italic.woff") format("woff"); }
@font-face { font-family: "Spectral"; font-weight: 500; font-style: normal; font-display: swap; src: url("/scheme/verla/fonts/subset-Spectral-Medium.woff2") format("woff2"), url("/scheme/verla/fonts/subset-Spectral-Medium.woff") format("woff"); }
@font-face { font-family: "Spectral"; font-weight: 500; font-style: italic; font-display: swap; src: url("/scheme/verla/fonts/subset-Spectral-MediumItalic.woff2") format("woff2"), url("/scheme/verla/fonts/subset-Spectral-MediumItalic.woff") format("woff"); }
@font-face { font-family: "Spectral"; font-weight: 600; font-style: normal; font-display: swap; src: url("/scheme/verla/fonts/subset-Spectral-SemiBold.woff2") format("woff2"), url("/scheme/verla/fonts/subset-Spectral-SemiBold.woff") format("woff"); }
@font-face { font-family: "Spectral"; font-weight: 600; font-style: italic; font-display: swap; src: url("/scheme/verla/fonts/subset-Spectral-SemiBoldItalic.woff2") format("woff2"), url("/scheme/verla/fonts/subset-Spectral-SemiBoldItalic.woff") format("woff"); }

/* Datepicker */
:root .dp__theme_light, :root body .dp__theme_light {
  --dp-highlight-color: #45934c;
  --dp-primary-color: #000000;
  --dp-reserved-text-color: #923a21;
}

/* Page ground and base type */
html body {
  background-color: #f9f9f9;
  color: #222222;
  font-family: Spectral, sans-serif;
  font-size: 18px;
  letter-spacing: -.02em;
  margin-bottom: 0;
}
html body #__layout { background-color: #f9f9f9; }

/* Headings: capitals in Spectral 500 */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body .navbar-main .menu-grid .menu-title {
  font-family: Spectral, sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* Body copy: .textcontent */
html body .text-content,
html body .product-content-text,
html body .category-info-wrap .product-content-infotext {
  color: rgba(34, 34, 34, .9);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.02em;
}

/* Text headings: .textcontent h1, h2 */
html body .text-content h1,
html body .text-content h2,
html body .product-content-text h2,
html body .product-content-infotitle {
  color: #333333;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -.04em;
}

/* Section title: .header-block h2 with the 30 x 2 px rule */
html body .js-grid-title-text {
  color: #923a21;
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: .07em;
  padding-top: 35px;
}
html body .js-grid-title-text::before {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin: 0 auto;
  position: relative;
  top: -32px;
  background-color: #923a21;
}

/* Hero title: .sub .hero-titles h1 */
html body .js-carousel-image-name,
html body .carousel-item-title,
html body .carousel-item-title h1,
html body .carousel-item-title h2,
html body .page-header-title,
html body .page-header-title h1 {
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: none;
  filter: drop-shadow(rgba(0, 0, 0, .6) 0 1px 2px);
}
@media (min-width: 992px) {
  html body .js-carousel-image-name { font-size: 48px; line-height: 53.5px; }
}

/* Top bar */
html body .navbar-main .navbar-brand { font-family: Spectral, sans-serif; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
/* Dark logo on the white bar: the platform sets the white logo inline, hence !important */
html body .navbar-main .navbar-logo { background-image: url("https://johku.com/verla/files/462.png") !important; }

/* Links */
html body .text-content a,
html body .product-content-text a { color: #923a21; }
html body .text-content a:hover,
html body .product-content-text a:hover { color: #682918; }
html body .text-content a.btn-primary,
html body .text-content a.btn-success,
html body .product-content-text a.btn-primary,
html body .product-content-text a.btn-success { color: #ffffff; }

/* Buttons: .button, .order-box button */
html body .btn,
html body .btn-sm,
html body .btn-md,
html body .btn-lg,
html body .btn.btn-lg,
html body .product-order-wrap .btn {
  border-radius: 0;
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
html body .btn-primary,
html body .btn-success {
  height: auto;
  color: #ffffff;
  background-color: #923a21;
  border-color: #923a21;
}
html body .btn-primary:hover,
html body .btn-success:hover {
  color: #ffffff;
  background-color: #682918;
  border-color: #682918;
}
html body .btn-default {
  background-color: #ffffff;
  border: 1px solid #923a21;
  color: #923a21;
  padding: 11px 15px;
}
html body .btn-default:hover { background-color: #f2f0ed; color: #682918; }
html body .search-button .btn { height: 40px; padding: 0 30px; line-height: 40px; }

/* Inputs: .order-box input, select */
html body .form-control,
html body .js-search-bar .form-control,
html body .vuedatepicker .dp__input,
html body .product-order-wrap .form-control {
  background-color: #ffffff;
  border: 1px solid #923a21;
  border-radius: 0;
  color: #222222;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  letter-spacing: 0;
}
html body .js-search-bar input::placeholder,
html body .js-search-bar select::placeholder,
html body .js-search-bar .dp__input::placeholder { color: #666666; }

/* Product card: .product-card */
html body .js-grid-item { background-color: #f2f0ed; color: #111111; }
html body .js-grid-item .grid-content-image,
html body .js-grid-item .grid-content-image img,
html body .js-grid-item .grid-content-image .mediabox,
html body .js-grid-item .grid-content-image .mediabox-img { border: 0; border-radius: 0; margin-bottom: 0; }
html body .js-grid-item .grid-content-title {
  color: #111111;
  font-family: Spectral, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.02em;
  margin: 20px 0 8px;
  padding: 0 18px;
  text-transform: uppercase;
}
html body .js-grid-item .grid-content-tags { padding: 0 18px 12px; }
html body .js-grid-item .grid-content-text {
  padding: 0 18px 18px;
  color: rgba(34, 34, 34, .9);
  font-size: 16px;
  line-height: 22px;
}
html body .grid-content-price {
  background-color: #ffffff;
  border-radius: 0;
  color: #923a21;
  font-family: Spectral, sans-serif;
  font-size: 27px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  padding: 10px 15px;
  white-space: nowrap;
}
html body .grid-content-price span { display: block; font-size: 14px; text-transform: lowercase; }
html body .grid-content-tagitem.grid-content-tagitem,
html body .product-page-tagitem.grid-content-tagitem {
  color: #863527;
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Order box: .order-box */
html body .product-order-wrap { background-color: #ffffff; border-top-color: #ffffff; color: #222222; }
html body .product-order-wrap label {
  color: #863527;
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html body .product-order-wrap .product-order-price {
  color: #923a21;
  font-family: Spectral, sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.02em;
}

/* Page tabs and breadcrumb: #jumpnavi */
html body .product-tabs-wrapper,
html body .product-tabs-wrapper[stuck] {
  background-color: #f9f9f9;
  border-bottom: 1px solid rgba(146, 58, 33, .2);
}
html body .product-tabs-wrapper .product-tab-name,
html body .product-tabs-wrapper .product-tab-name a,
html body .product-tabs-wrapper[stuck] .product-tab-name,
html body .product-tabs-wrapper[stuck] .product-tab-name a { color: #923a21; }
html body .product-tabs-wrapper .product-tab a,
html body .product-tabs-wrapper[stuck] .product-tab a {
  color: rgba(13, 13, 13, .95);
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html body .product-tabs-wrapper .product-tab a:hover,
html body .product-tabs-wrapper .product-tab a:focus,
html body .product-tabs-wrapper .product-tab.active a,
html body .product-tabs-wrapper[stuck] .product-tab a:hover,
html body .product-tabs-wrapper[stuck] .product-tab a:focus,
html body .product-tabs-wrapper[stuck] .product-tab.active a {
  background-color: transparent;
  color: #923a21;
}
html body .breadcrumb-navi-wrap { background-color: #f1efec; }
html body .breadcrumb-navi-wrap,
html body .breadcrumb-navi-wrap a { color: #863527; }

/* Footer: .footer-navi, .footer-contacts */
html body footer,
html body .js-footer-navi { background-color: #f1efec; color: #111111; }
html body footer {
  font-family: Raleway, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 18px;
}
html body footer a { color: #111111; }
html body footer a:not(.btn):hover { color: #863527; text-decoration: underline; }
html body .js-footer-navi a:not(.btn) {
  color: #863527;
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: .1em;
  line-height: 18px;
  padding-bottom: 3px;
  text-transform: uppercase;
}
html body footer .btn { color: #111111; background-color: transparent; border-color: #111111; }
html body .footer-merchant-logo { background-color: transparent; border-radius: 0; box-shadow: none; }

/* Modals, language and cart */
html body .modal-content { border-radius: 0; }
html body .panel-heading { border-radius: 0; }
html body .js-language-nav {
  font-family: Raleway, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html body .cart-shoptitle,
html body .cart-shoptitle h4,
html body .js-cart-title,
html body .js-cart-merchant-title,
html body .order-merchant-wrappertitle,
html body .order-merchant-totaltitle,
html body .order-merchant-totalsum,
html body .product-extras-title,
html body .textpage-title { color: #923a21; }
html body .order-merchant-detailswrap { background-color: #f1efec; }
html body .order-merchant-detailswrap,
html body .order-merchant-detailswrap a { color: #3f190e; }

/* Focus: intentional addition, verla.fi defines no ring */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible {
  outline: 2px solid #923a21;
  outline-offset: 2px;
}

/* verla.fi switches to its mobile type at 991 px */
@media (max-width: 991px) {
  html body .text-content,
  html body .product-content-text,
  html body .category-info-wrap .product-content-infotext {
    font-weight: 400;
    letter-spacing: 0;
    line-height: 22.5px;
  }
  html body .text-content h1,
  html body .text-content h2,
  html body .product-content-text h2,
  html body .product-content-infotitle { font-size: 24px; line-height: 1.2; }
  html body .js-grid-title-text { font-size: 30px; line-height: 36px; letter-spacing: -.04em; }
  html body .js-carousel-image-name { font-size: 30px; line-height: 35px; }
}