/*
 * Vinkymon theme layer.
 *
 * Loaded after main.min.css and after the Voog design editor styles
 * (see components/html-head.tpl). It only styles things the design editor
 * has no setting for: the heading font, the header look, cards, the
 * newsletter and the decorations. Colours, buttons and menu colours are
 * still design-editor settings (components/template-cs-*.tpl).
 *
 * Fraunces is licensed under the SIL Open Font License 1.1
 * (LICENSES/Fraunces-OFL.txt).
 */

/* ------------------------------------------------------------------ */
/* Fonts                                                               */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fraunces-latin.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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fraunces-latin-italic.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: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fraunces-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
  --vk-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --vk-font-body: var(--main-font-family, 'Avenir Next', sans-serif);

  --vk-cream: #f6f1e7;
  --vk-paper: #fffdf8;
  --vk-ink: #1f2a22;
  --vk-ink-soft: #4a5548;
  --vk-muted: #7a8377;
  --vk-line: rgba(31, 42, 34, 0.1);
  --vk-forest: #1f3a2b;
  --vk-quince: #c8532b;
  --vk-quince-soft: #f6dccf;
  --vk-lemon: #efd85a;

  /* Card tiles, one per product category, in order */
  --vk-tile-1: #fbf0c4;
  --vk-tile-2: #f6dccf;
  --vk-tile-3: #efe7d6;
  --vk-tile-4: #fbe2cf;
  --vk-tile-5: #dcebe4;
  --vk-tile-6: #e6eed6;
  --vk-tile-7: #eedfe8;

  --vk-radius-sm: 12px;
  --vk-radius: 20px;
  --vk-radius-lg: 28px;
  --vk-shadow: 0 1px 2px rgba(31, 42, 34, 0.04), 0 8px 24px rgba(31, 42, 34, 0.06);
  --vk-shadow-hover: 0 2px 4px rgba(31, 42, 34, 0.05), 0 18px 40px rgba(31, 42, 34, 0.12);
  --vk-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing: the only three distances between components on the site.
     section: between sections, under the navbar, above the newsletter
     head:    from a section or page title to what it introduces
     gutter:  between cards (grids, newsletter and footer, contact cards) */
  --vk-space-section: clamp(72px, 8vw, 112px);
  --vk-space-head: clamp(32px, 3.4vw, 48px);
  --vk-space-gutter: clamp(16px, 1.7vw, 24px);

  /* Floating navbar */
  --vk-bubble-gap: 16px;
  --vk-frame-max: 1680px; /* the navbar bubble and the hero share these edges */
  --vk-glass: rgba(255, 253, 248, 0.72);
  --vk-glass-strong: rgba(255, 253, 248, 0.9);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

html,
body {
  background-color: var(--vk-cream);
}

/* Nothing may make the page scroll sideways on phones. Clip on html only:
   any overflow on body turns it into a scroll box and the sticky header
   stops sticking. */
html {
  overflow-x: clip;
}

/* main.css paints shop pages white; keep the whole site on cream */
.product_list-page,
.product-page {
  background-color: var(--vk-cream);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--vk-lemon);
  color: var(--vk-ink);
}

/* Headings get the display font. The site title in the header keeps its
   own content (logo or text), so it is left alone. */
.content-formatted:not(.header_title):not(.site_title) h1,
.content-formatted:not(.header_title):not(.site_title) h2,
.content-formatted:not(.header_title):not(.site_title) h3,
.content-formatted:not(.header_title):not(.site_title) h4,
.content-formatted:not(.header_title):not(.site_title) h5,
.content-formatted:not(.header_title):not(.site_title) h6,
.post .post_title,
.vk-section-title,
.footer .nl-label {
  font-family: var(--vk-font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  color: var(--vk-ink);
}

.content-formatted:not(.header_title):not(.site_title) h1 em,
.content-formatted:not(.header_title):not(.site_title) h2 em,
.vk-section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--vk-quince);
}

/* Small uppercase label above section titles */
.vk-eyebrow {
  display: block;
  margin: 0 0 12px;
  font-family: var(--vk-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vk-quince);
}

.vk-section-head {
  margin: 0 auto var(--vk-space-head);
  max-width: 640px;
  text-align: center;
}

.vk-section-title {
  margin: 0;
  text-wrap: balance;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  line-height: 1.12;
}

/* Floating lemons and flowers: keep them behind the content and quieter,
   so they decorate instead of covering text. */
.floating-things {
  z-index: 0;
  opacity: 0.38;
  pointer-events: none;
}

/* Shop and product pages: the products are the decoration */
.product_list-page .floating-things,
.product-page .floating-things {
  opacity: 0.16;
}

.container_wrap {
  position: relative;
  z-index: 1;
}

/* Page frame: one section distance under the navbar (or the hero), and
   nothing extra at the bottom: the newsletter's own margin is the break
   before the footer. main.css used 100px on top and 32px + 32px below. */
html .pad_container {
  padding-top: var(--vk-space-section);
  padding-bottom: 0;
}

html .footer {
  padding-bottom: 0;
}

@media screen and (max-width: 640px) {
  .floating-things {
    opacity: 0.2;
  }
}

/* Page titles stored as H3 are served as H1 (see layouts/common_page.tpl
   and layouts/product.tpl); they keep the H3 look from the design editor */
.content-formatted h1.vk-h1 {
  margin: 16px 0 8px;
  font-size: var(--headings-subheading-font-size);
  font-style: var(--headings-subheading-font-style);
  font-weight: var(--headings-subheading-font-weight);
  line-height: var(--headings-subheading-line-height);
  color: var(--headings-subheading-color);
  text-align: var(--headings-subheading-text-alignment);
  text-transform: var(--headings-subheading-text-transform);
}

@media screen and (max-width: 900px) {
  .content-formatted h1.vk-h1 {
    font-size: calc(var(--headings-subheading-font-size) / 1.4);
  }
}

/* Blog article title (an H1): editorial size */
.article_item h1.post_title {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.1;
  text-wrap: balance;
}

/* Visible to screen readers and search engines only */
.vk-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus: a clear, on-brand ring (mouse clicks show none) */
:focus-visible {
  outline: 2px solid var(--vk-quince);
  outline-offset: 3px;
  border-radius: 6px;
}

.pcard:focus-visible,
.vk-hero__cta:focus-visible,
.custom-btn:focus-visible,
.btn:focus-visible {
  border-radius: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Long words (Estonian, German) and content pictures never push the page
   sideways on phones */
.content-formatted {
  overflow-wrap: break-word;
}

.content-formatted img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 640px) {
  .block-container .col-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

/* Content buttons (.custom-btn) take their colours from the design
   editor; only the shape and motion are set here. */
.custom-btn,
.btn,
.footer .nl-btn {
  border-radius: 999px !important;
  transition: background-color 0.25s var(--vk-ease), color 0.25s var(--vk-ease), transform 0.25s var(--vk-ease), box-shadow 0.25s var(--vk-ease);
}

.custom-btn:hover,
.btn:hover,
.footer .nl-btn:hover {
  transform: translateY(-1px);
}

.btn {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.btn--black {
  background: var(--vk-forest);
  color: #fff;
}

.btn--black:hover {
  background: var(--vk-quince);
  color: #fff;
}

/* Text link with an arrow that moves on hover */
.vk-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vk-forest);
  text-decoration: none;
}

.vk-link-arrow::after {
  content: '→';
  transition: transform 0.3s var(--vk-ease);
}

a:hover .vk-link-arrow,
.vk-link-arrow:hover {
  color: var(--vk-quince);
}

a:hover .vk-link-arrow::after,
.vk-link-arrow:hover::after {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ */
/* Header: logo left, menu centred, language and cart right            */
/* ------------------------------------------------------------------ */

/* main.css sets overflow: hidden on body, which turns it into a scroll
   box and stops the header from sticking. Clip sideways on html only. */
html body {
  overflow: visible;
}

/* Floating bubble: the header itself is a transparent strip that keeps a
   margin on the top, left and right; the pill inside it (.header_fixed-content)
   is the visible navbar. Sticky on every page and every screen size, so the
   page content always starts below it and never under it. The strip lets
   clicks through; only the pill catches them. */
html .header_fixed,
html .header_fixed.relative,
html .front-page .header_fixed,
html .header_fixed.scroll,
html.semimodal-open:not(.semimodal-relative) .header_fixed {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 110;
  padding: var(--vk-bubble-gap) var(--vk-bubble-gap) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  pointer-events: none;
  transition: none;
}

html .header_fixed .header_fixed-content {
  position: relative;
  pointer-events: auto;
  box-sizing: border-box;
  padding: 0 14px 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: var(--vk-glass);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  box-shadow:
    0 0 0 1px rgba(31, 42, 34, 0.06),
    0 1px 2px rgba(31, 42, 34, 0.04),
    0 12px 32px -12px rgba(31, 42, 34, 0.16);
  transition: min-height 0.45s var(--vk-ease), box-shadow 0.45s var(--vk-ease), background-color 0.45s var(--vk-ease);
}

/* A hairline of light along the top edge, like polished glass */
html .header_fixed .header_fixed-content::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
  z-index: -1;
}

/* Scrolled: a little slimmer, a little more solid, a deeper shadow */
html body.scroll .header_fixed .header_fixed-content,
html.semimodal-open:not(.semimodal-relative) .header_fixed .header_fixed-content {
  background: var(--vk-glass-strong);
  box-shadow:
    0 0 0 1px rgba(31, 42, 34, 0.07),
    0 2px 6px rgba(31, 42, 34, 0.05),
    0 22px 48px -18px rgba(31, 42, 34, 0.28);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html .header_fixed .header_fixed-content {
    background: var(--vk-paper);
  }
}

/* One row, everything centred vertically. The logo keeps the theme's 20%
   box, which is what the uploaded logo is sized against. */
html .header_fixed .header_fixed-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  max-width: var(--vk-frame-max);
  min-height: 72px;
  margin: 0 auto;
}

html body.scroll .header_fixed .header_fixed-content {
  min-height: 64px;
}

html .header_fixed .header_title {
  flex: 0 0 20%;
  width: 20%;
  margin: 0;
  padding: 0;
}

html .header_fixed .menu-main-wrapper {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  justify-content: center;
}

html .header_fixed .header_components {
  position: static;
  flex: 0 0 18%;
  width: 18%;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin: 0;
}

/* main.min.css pushes the menu and the language button 12px down */
html .header_fixed .menu-main,
html .header_fixed .header_components {
  margin-top: 0;
}

html .header_fixed .menu_top.menu-main .menu,
html .header_fixed .menu_top-list {
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 34px;
  margin: 0;
  padding: 0;
}

html .header_fixed .menu_top-list > .menu-item {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Menu links: ink, medium weight, an orange line grows on hover */
html .header_fixed .menu_top-list > .menu-item > a {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: rgba(31, 42, 34, 0.78);
  transition: color 0.2s ease;
}

html .header_fixed .menu_top-list > .menu-item > a:hover,
html .header_fixed .menu_top-list > .menu-item > a.active,
html .header_fixed .menu_top-list > .menu-item > a.selected {
  color: var(--vk-ink);
}

.header_fixed .menu_top-list > .menu-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--vk-quince);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--vk-ease);
}

.header_fixed .menu_top-list > .menu-item > a:hover::after,
.header_fixed .menu_top-list > .menu-item > a.active::after,
.header_fixed .menu_top-list > .menu-item > a.selected::after {
  transform: scaleX(1);
}

/* "…" button for menu items that do not fit */
html .header_fixed .menu_popover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 18px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

html .header_fixed .menu_popover-btn:hover {
  background-color: var(--vk-cream);
}

/* Dropdowns ("Tooted" and the "…" menu). main.css makes them black with
   white text (!important); here they are light cards with dark text. */
html .dropdown_menu-popover--wrap {
  padding-top: 14px;
}

html .dropdown_menu-popover,
html .menu-main .menu .menu_popover-list {
  width: 230px;
  padding: 8px;
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  background: var(--vk-paper);
  box-shadow: 0 20px 50px rgba(31, 42, 34, 0.14);
  box-sizing: border-box;
}

html .menu-main .menu .menu_popover {
  top: calc(100% + 14px);
  width: 230px;
}

html .dropdown_menu-popover .menu,
html .menu-main .menu .menu_popover .menu {
  padding: 0;
  gap: 0;
}

html .dropdown_menu-popover .menu .menu-item,
html .menu-main .menu .menu_popover .menu .menu-item {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

html .dropdown_menu-popover .menu .menu-item:hover,
html .menu-main .menu .menu_popover .menu .menu-item:hover {
  background-color: var(--vk-cream);
}

html .dropdown_menu-popover .menu .menu-item a,
html .menu-main .menu .menu_popover .menu .menu-item a {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 7px 14px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--vk-ink) !important;
  box-sizing: border-box;
}

html .dropdown_menu-popover .menu .menu-item a::after,
html .menu-main .menu .menu_popover .menu .menu-item a::after {
  display: none;
}

html .dropdown_menu-popover .menu .menu-item a:hover,
html .dropdown_menu-popover .menu .menu-item a.active,
html .menu-main .menu .menu_popover .menu .menu-item a:hover,
html .menu-main .menu .menu_popover .menu .menu-item a.active {
  color: var(--vk-quince) !important;
}

html .dropdown_menu-popover .menu .menu-item a.untranslated {
  color: #b42318 !important;
}

/* Language button: a 40px pill. The flag is the button's ::before and
   ::after (a sprite), drawn larger with rounded corners. */
html .header_fixed .menu-language-btn,
html .semimodal .menu-language-btn,
html.language-menu-mode-popover .header_fixed .menu-language-btn,
html.language-flags-enabled.language-names-disabled.language-menu-mode-popover .header_fixed .menu-language-btn,
html.language-flags-enabled.language-names-disabled.language-menu-mode-popover .semimodal .menu-language-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  padding: 0 36px 0 16px;
  border: 1px solid var(--vk-line);
  border-radius: 999px;
  background: var(--vk-paper);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.language-flags-enabled.language-names-disabled.language-menu-mode-popover .header_fixed .menu-language-btn,
html.language-flags-enabled.language-names-disabled.language-menu-mode-popover .semimodal .menu-language-btn {
  width: 74px;
  padding: 0;
  font-size: 0;
}

html .header_fixed .menu-language-btn:hover,
html .semimodal .menu-language-btn:hover {
  opacity: 1;
  border-color: rgba(31, 42, 34, 0.28);
  box-shadow: 0 4px 14px rgba(31, 42, 34, 0.08);
}

html .header_fixed .menu-language-btn svg,
html .semimodal .menu-language-btn svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 7px;
  transform: translateY(-50%);
}

html.language-flags-enabled .header_fixed .menu-language-btn::before,
html.language-flags-enabled .header_fixed .menu-language-btn::after,
html.language-flags-enabled .semimodal .menu-language-btn::before,
html.language-flags-enabled .semimodal .menu-language-btn::after {
  top: 50%;
  left: 15px;
  right: auto;
  margin: 0;
  border-radius: 2px;
  transform: translateY(-50%) scale(1.25);
  transform-origin: left center;
}

html.language-flags-enabled .header_fixed .menu-language-btn::after,
html.language-flags-enabled .semimodal .menu-language-btn::after {
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}

/* Flag plus name: make room for the flag in front of the name */
html.language-flags-enabled.language-names-enabled .header_fixed .menu-language-btn,
html.language-flags-enabled.language-names-enabled .semimodal .menu-language-btn {
  padding-left: 52px;
}

/* Language list: flag and name on each row, even in "flags only" mode */
html .lang_menu-popover {
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  background: var(--vk-paper);
  box-shadow: 0 20px 50px rgba(31, 42, 34, 0.14);
  overflow: hidden;
  box-sizing: border-box;
}

html .lang_menu-popover .menu.menu-public {
  padding: 0;
}

html .lang_menu-popover .menu .menu-item {
  width: 100%;
  margin: 0;
  padding: 0;
}

html .lang_menu-popover .menu .menu-item a.ico-flags {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 50px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vk-ink);
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

html .lang_menu-popover .menu .menu-item a.ico-flags:hover,
html .lang_menu-popover .menu .menu-item a.ico-flags.selected {
  background-color: var(--vk-cream);
  opacity: 1;
}

html .lang_menu-popover .menu .menu-item a.ico-flags::before,
html .lang_menu-popover .menu .menu-item a.ico-flags::after {
  top: 50%;
  left: 14px;
  margin: 0;
  border-radius: 2px;
  transform: translateY(-50%) scale(1.15);
  transform-origin: left center;
}

html .lang_menu-popover .menu .menu-item a .menu-language-popover-name {
  display: inline !important;
  font-size: 14.5px;
}

/* Burger button */
html .menu-btn {
  align-items: center;
  gap: 10px;
}

html .menu-btn label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}


@media screen and (max-width: 900px) {
  :root {
    --vk-bubble-gap: 10px;
  }

  /* Phone row: burger | logo (centred) | language, inside the bubble */
  html .header_fixed .header_fixed-content,
  html body.scroll .header_fixed .header_fixed-content {
    min-height: 58px;
    padding: 0 8px;
  }

  html .header_fixed-content > .menu-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    justify-content: flex-start;
  }

  html .header_fixed-content > .menu-btn label {
    display: none;
  }

  html .header_fixed .header_title {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    text-align: center;
  }

  /* main.min.css places the logo absolutely 55px from the left on phones;
     in this row it is centred instead, at the same size */
  html .header_fixed .header_title > .image-container {
    position: relative !important;
    top: auto;
    left: auto;
    margin: 0 auto;
  }

  html .header_fixed .header_components {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
  }
}

/* ------------------------------------------------------------------ */
/* Logo: shown exactly as uploaded; on the first page of a visit it is */
/* written in left to right                                            */
/* ------------------------------------------------------------------ */

.header_title a,
.semimodal .site_title a {
  color: inherit;
  text-decoration: none;
}

/* A soft-edged mask sweeps left to right, like a pen writing the name.
   The inline script in html-head.tpl adds .vk-draw-logo once per visit. */
.vk-draw-logo .header_title img,
.vk-draw-logo .header_title > *:not(:has(img)),
.vk-draw-logo .semimodal .site_title img {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: vk-write 2.2s cubic-bezier(0.55, 0.1, 0.35, 1) 0.25s both;
}

@keyframes vk-write {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

/* ------------------------------------------------------------------ */
/* Drawer (the side menu opened with the burger button)                */
/* ------------------------------------------------------------------ */

/* Dimmed backdrop behind the drawer. Clicking it closes the drawer
   (vinkymon-theme.js). */
.container_wrap::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 30, 22, 0.38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--vk-ease);
}

html.semimodal-open:not(.semimodal-relative) .container_wrap::after {
  opacity: 1;
  pointer-events: auto;
}

html:not(.semimodal-relative) .semimodal {
  width: 440px;
  min-width: 0 !important;
  max-width: 92vw !important;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(239, 216, 90, 0.18) 0%, rgba(239, 216, 90, 0) 60%),
    var(--vk-paper);
  box-shadow: 30px 0 80px rgba(20, 30, 22, 0);
  transition: transform 0.65s var(--vk-ease), box-shadow 0.65s var(--vk-ease);
}

html.semimodal-open:not(.semimodal-relative) .semimodal {
  min-width: 0 !important;
  max-width: 92vw !important;
  box-shadow: 30px 0 80px rgba(20, 30, 22, 0.18);
}

@media screen and (max-width: 640px) {
  html:not(.semimodal-relative) .semimodal,
  html.semimodal-open:not(.semimodal-relative) .semimodal {
    width: 100vw;
    max-width: 100vw !important;
  }
}

.semimodal .semimodal_inner {
  padding: 28px 40px 40px;
  box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  .semimodal .semimodal_inner {
    padding: 18px 24px 32px;
  }
}

/* Show the logo at the top of the drawer */
html:not(.semimodal-relative) .semimodal .site_title {
  display: block;
  margin: 36px 0 8px;
}

/* Menu items: calm, readable, slide in one after another */
html .semimodal .menu-main .menu .menu-item a {
  display: inline-block;
  padding: 10px 0;
  font-family: var(--vk-font-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--vk-ink);
  transition: color 0.25s ease, transform 0.35s var(--vk-ease);
}

html .semimodal .menu-main .menu .menu-item a:hover {
  color: var(--vk-quince);
  transform: translateX(6px);
}

html .semimodal .menu-main .menu .menu-item a.active,
html .semimodal .menu-main .menu .menu-item a.selected {
  color: var(--vk-quince);
}

html .semimodal .menu-main .menu .menu-sub .menu-item a,
html .semimodal .menu-main .menu .menu-item-sub a {
  padding: 6px 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--vk-ink-soft);
}

.semimodal .menu_semimodal-list {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--vk-line);
}

.semimodal .menu_semimodal-list > * {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.5s var(--vk-ease), transform 0.6s var(--vk-ease);
}

.semimodal-open .semimodal .menu_semimodal-list > * {
  opacity: 1;
  transform: none;
}

.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(1) { transition-delay: 0.12s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(2) { transition-delay: 0.17s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(3) { transition-delay: 0.22s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(4) { transition-delay: 0.27s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(5) { transition-delay: 0.32s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(6) { transition-delay: 0.37s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(7) { transition-delay: 0.42s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(8) { transition-delay: 0.47s; }
.semimodal-open .semimodal .menu_semimodal-list > *:nth-child(n + 9) { transition-delay: 0.52s; }

/* Editor buttons inside the drawer must stay visible */
.editmode .semimodal .menu_semimodal-list > * {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ */
/* Hero (components/slider.tpl)                                        */
/* ------------------------------------------------------------------ */

.vk-hero {
  --vk-hero-time: 6.5s;
  position: relative;
  z-index: 1;
  height: clamp(480px, 78vh, 780px);
  width: calc(100% - 2 * var(--vk-bubble-gap));
  max-width: var(--vk-frame-max);
  margin: var(--vk-bubble-gap) auto 0;
  border-radius: var(--vk-radius-lg);
  overflow: hidden;
  background: #1c2a20;
  color: #fff;
  isolation: isolate;
}

.vk-hero__slides,
.vk-hero__slide,
.vk-hero__media,
.vk-hero__shade {
  position: absolute;
  inset: 0;
}

/* Crossfade, and a slow zoom out on the visible photo */
.vk-hero__slide {
  opacity: 0;
  transition: opacity 1.4s var(--vk-ease);
}

.vk-hero__slide.is-active {
  opacity: 1;
}

.vk-hero__media {
  background-size: cover;
  background-position: center;
  transform: scale(1.12);
  transition: transform 9s cubic-bezier(0.2, 0.6, 0.35, 1);
  will-change: transform;
}

.vk-hero__slide.is-active .vk-hero__media {
  transform: scale(1);
}

/* Darker towards the bottom left, where the text is */
.vk-hero__shade {
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(14, 22, 16, 0.72) 0%, rgba(14, 22, 16, 0.25) 45%, rgba(14, 22, 16, 0) 70%),
    linear-gradient(90deg, rgba(14, 22, 16, 0.45) 0%, rgba(14, 22, 16, 0) 60%);
}

.vk-hero__content {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 6vw, 88px);
  right: clamp(24px, 6vw, 88px);
  bottom: clamp(88px, 12vh, 128px);
  max-width: 720px;
}

.vk-hero__eyebrow {
  display: inline-flex;
  margin: 0;
  font-family: var(--vk-font-body);
  line-height: 1.4;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  opacity: 0;
  transform: translateY(10px);
  animation: vk-rise 0.9s var(--vk-ease) 0.2s forwards;
}

.vk-hero__eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--vk-lemon);
}

/* Titles stack on top of each other; the active one rises in */
.vk-hero__titles {
  display: grid;
  margin-bottom: 30px;
}

.vk-hero__title {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--vk-font-display);
  font-size: clamp(34px, 5.2vw, 68px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.6s ease, transform 0.6s var(--vk-ease), filter 0.6s ease;
  pointer-events: none;
}

.vk-hero__title.is-active {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.9s ease 0.35s, transform 1.1s var(--vk-ease) 0.35s, filter 0.9s ease 0.35s;
  pointer-events: auto;
}

.vk-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 24px;
  border-radius: 999px;
  background: var(--vk-paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vk-ink) !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(10px);
  animation: vk-rise 0.9s var(--vk-ease) 0.55s forwards;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.vk-hero__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vk-forest);
  color: #fff;
  transition: transform 0.35s var(--vk-ease), background-color 0.25s ease;
}

.vk-hero__cta:hover {
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

.vk-hero__cta:hover .vk-hero__cta-arrow {
  background: var(--vk-quince);
  transform: translateX(3px);
}

@keyframes vk-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Progress bars (left) and arrows (right) along the bottom */
.vk-hero__controls {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 6vw, 88px);
  right: clamp(24px, 6vw, 88px);
  bottom: clamp(28px, 4vh, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.vk-hero__progress {
  display: flex;
  gap: 10px;
}

.vk-hero__bar {
  position: relative;
  width: 56px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.vk-hero__bar::before,
.vk-hero__bar > span {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
}

.vk-hero__bar::before {
  right: 0;
  background: rgba(255, 255, 255, 0.32);
}

.vk-hero__bar > span {
  width: 0;
  background: #fff;
}

.vk-hero__bar.is-active > span {
  animation: vk-fill var(--vk-hero-time) linear forwards;
}

.vk-hero:hover .vk-hero__bar.is-active > span {
  animation-play-state: paused;
}

@keyframes vk-fill {
  to {
    width: 100%;
  }
}

/* Reduced motion: no zoom, no blur, no automatic slides */
.vk-hero--static .vk-hero__media,
.vk-hero--static .vk-hero__slide.is-active .vk-hero__media {
  transform: none;
  transition: none;
}

.vk-hero--static .vk-hero__title,
.vk-hero--static .vk-hero__title.is-active {
  filter: none;
  transform: none;
  transition: opacity 0.3s ease;
}

.vk-hero--static .vk-hero__bar.is-active > span {
  width: 100%;
  animation: none;
}

@media screen and (max-width: 640px) {
  .vk-hero {
    height: min(72vh, 600px);
    min-height: 440px;
    border-radius: var(--vk-radius);
  }

  .vk-hero__content {
    bottom: 92px;
  }

  .vk-hero__eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .vk-hero__titles {
    margin-bottom: 22px;
  }

  .vk-hero__bar {
    width: 40px;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage: product categories (layouts/newfrontpage.tpl)             */
/* ------------------------------------------------------------------ */

.product-categories {
  max-width: 1200px;
  margin: var(--vk-space-section) auto 0;
}

/* Flex rather than grid so an incomplete last row is centred */
.pcards-grid {
  --vk-cols: 4;
  --vk-gap: var(--vk-space-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vk-gap);
}

.pcards-grid > .pcard {
  flex: 0 0 calc((100% - (var(--vk-cols) - 1) * var(--vk-gap)) / var(--vk-cols));
  max-width: calc((100% - (var(--vk-cols) - 1) * var(--vk-gap)) / var(--vk-cols));
}

@media screen and (max-width: 1100px) {
  .pcards-grid {
    --vk-cols: 3;
  }
}

@media screen and (max-width: 760px) {
  .pcards-grid {
    --vk-cols: 2;
  }
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--vk-radius);
  /* one colour for the whole card, lighter at the top left */
  background-color: var(--vk-tile, var(--vk-tile-1));
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(110% 70% at 50% 108%, rgba(31, 42, 34, 0.07) 0%, rgba(31, 42, 34, 0) 70%);
  box-shadow: 0 1px 2px rgba(31, 42, 34, 0.04), 0 10px 30px -18px rgba(31, 42, 34, 0.25);
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transition: transform 0.5s var(--vk-ease), box-shadow 0.5s var(--vk-ease);
}

.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(31, 42, 34, 0.05), 0 24px 50px -20px rgba(31, 42, 34, 0.35);
}

.pcard:nth-child(7n + 1) { --vk-tile: var(--vk-tile-1); }
.pcard:nth-child(7n + 2) { --vk-tile: var(--vk-tile-2); }
.pcard:nth-child(7n + 3) { --vk-tile: var(--vk-tile-3); }
.pcard:nth-child(7n + 4) { --vk-tile: var(--vk-tile-4); }
.pcard:nth-child(7n + 5) { --vk-tile: var(--vk-tile-5); }
.pcard:nth-child(7n + 6) { --vk-tile: var(--vk-tile-6); }
.pcard:nth-child(7n + 7) { --vk-tile: var(--vk-tile-7); }

/* Picture area: tall, with room around the picture so the hover zoom
   never reaches the edge */
.pcard-media {
  position: relative;
  flex: none;
  box-sizing: border-box;
  aspect-ratio: 4 / 5;
  /* without this a large picture stretches the box to its own height */
  min-height: 0;
}

/* A soft oval shadow under the product, like it stands on the card */
.pcard-media::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 22%;
  right: 22%;
  bottom: 3%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(31, 42, 34, 0.22), rgba(31, 42, 34, 0));
  transition: transform 0.6s var(--vk-ease), opacity 0.6s var(--vk-ease);
}

.pcard-img {
  /* pinned inside the picture area, so the file's own size never
     changes the card's size */
  position: absolute;
  top: 9%;
  bottom: 5%;
  left: 11%;
  right: 11%;
  display: block;
  width: 78%;
  height: 86%;
  max-width: none;
  object-fit: contain;
  /* white or light backgrounds of product shots melt into the card colour */
  mix-blend-mode: multiply;
  transition: transform 0.7s var(--vk-ease);
}

.pcard:hover .pcard-img {
  transform: translateY(-6px) scale(1.04);
}

.pcard:hover .pcard-media::after {
  transform: scaleX(0.85);
  opacity: 0.7;
}

/* Photos (vinkymon-theme.js adds .vk-img-photo): the photo fills the
   card and the name sits on a soft shade at the bottom. A spacer keeps
   the card exactly as tall as the others. */
.pcard.vk-img-photo::before {
  content: '';
  display: block;
  aspect-ratio: 4 / 5;
}

.pcard.vk-img-photo .pcard-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  padding: 0;
}

.pcard.vk-img-photo .pcard-media::after {
  inset: 45% 0 0;
  z-index: 1;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 22, 16, 0) 0%, rgba(14, 22, 16, 0.65) 100%);
}

.pcard.vk-img-photo .pcard-img,
.pcard.vk-img-unknown .pcard-img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.pcard.vk-img-photo .pcard-img {
  object-fit: cover;
  mix-blend-mode: normal;
}

.pcard.vk-img-photo:hover .pcard-img {
  transform: scale(1.05);
}

/* The shade under the name stays full width on hover (only the oval
   shadow under cut-out products shrinks) */
.pcard.vk-img-photo:hover .pcard-media::after {
  transform: none;
  opacity: 1;
}

.pcard.vk-img-photo .pcard-body {
  position: relative;
  z-index: 2;
}

.pcard.vk-img-photo .pcard-title {
  color: #fff;
}

.pcard-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 6px 22px 22px;
}

/* Pictures that cannot be inspected: whole, on a blurred copy of itself */
.pcard.vk-img-unknown .pcard-media {
  padding: 0;
  overflow: hidden;
}

.pcard.vk-img-unknown .pcard-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vk-pic) center / cover no-repeat;
  filter: blur(26px) saturate(1.1);
  transform: scale(1.3);
  opacity: 0.6;
}

.pcard.vk-img-unknown .pcard-media::after {
  display: none;
}

.pcard.vk-img-unknown .pcard-img {
  mix-blend-mode: normal;
}

.pcard-title {
  margin: 0;
  font-family: var(--vk-font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vk-ink);
}

/* Round arrow button; the arrow is an SVG so it sits exactly centred */
.pcard-arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: var(--vk-forest);
  transition: background-color 0.3s var(--vk-ease), color 0.3s var(--vk-ease), transform 0.3s var(--vk-ease);
}

.pcard-arrow svg {
  display: block;
}

.pcard:hover .pcard-arrow {
  background: var(--vk-forest);
  color: #fff;
  transform: translateX(2px);
}

@media screen and (max-width: 760px) {
  .pcard-body {
    padding: 4px 12px 14px;
  }

  .pcard-title {
    font-size: 16px;
  }

  .pcard-arrow {
    width: 30px;
    height: 30px;
  }

  .pcard-arrow svg {
    width: 12px;
    height: 12px;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage: latest blog posts                                         */
/* ------------------------------------------------------------------ */

.fp-blog {
  margin: var(--vk-space-section) 0 0;
}

.fp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vk-space-gutter);
}

@media screen and (min-width: 700px) {
  .fp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1024px) {
  .fp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--vk-radius);
  background: var(--vk-paper);
  box-shadow: var(--vk-shadow);
  overflow: hidden;
  transition: transform 0.45s var(--vk-ease), box-shadow 0.45s var(--vk-ease);
}

.fp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vk-shadow-hover);
}

.fp-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--vk-tile-3);
  overflow: hidden;
}

.fp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--vk-ease);
}

.fp-card:hover .fp-thumb img {
  transform: scale(1.05);
}

.fp-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.fp-date {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

.fp-title {
  margin: 0 0 10px;
  font-family: var(--vk-font-display);
  font-size: 19.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.fp-title a {
  color: var(--vk-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--vk-ease);
}

.fp-card:hover .fp-title a {
  background-size: 100% 1px;
}

.fp-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 0 22px;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--vk-ink-soft);
}

.fp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--vk-line);
}

.fp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fp-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--vk-quince-soft);
  font-size: 12px;
  color: #8a3a1e;
}

/* ------------------------------------------------------------------ */
/* Blog listing page (layouts/blog___news.tpl): the same cards as the  */
/* homepage blog section, pictures edge to edge                        */
/* ------------------------------------------------------------------ */

/* Blog page: intro text, then the posts a heading distance below */
.blog-page main > .content-body,
main > .content-body + .blog_listing-wrapper-2 {
  margin-top: 0;
}

main > .content-body:has(+ .blog_listing-wrapper-2),
main > .content-body:has(+ * + .blog_listing-wrapper-2) {
  margin-bottom: var(--vk-space-head);
}

html .blog_listing-wrapper-2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vk-space-gutter);
}

html .blog_listing-wrapper-2 > .blog_listing-item-2 {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html .blog_listing-wrapper-2 > .blog_listing-item--featured-2 {
  grid-column: 1 / -1;
}

html .blog_listing-link-2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--vk-radius);
  background: var(--vk-paper);
  box-shadow: var(--vk-shadow);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s var(--vk-ease), box-shadow 0.45s var(--vk-ease);
}

html .blog_listing-link-2:hover {
  transform: translateY(-4px);
  box-shadow: var(--vk-shadow-hover);
}

/* Featured (newest) post: picture left, text right */
html .featured-article-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html .featured-article__media-2,
html .card-article__media-2,
html .card-article__media-inner-2,
html .featured-article__media-2 .p-rel,
html .card-article__media-2 .p-rel {
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

html .featured-article__media-2 {
  min-height: 360px;
  background: var(--vk-tile-3);
}

html .featured-article__media-2 .p-rel {
  height: 100%;
}

html .card-article__media-2 .p-rel {
  aspect-ratio: 4 / 3;
  background: var(--vk-tile-3);
}

html .featured-article__media-2 img,
html .card-article__media-2 img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.8s var(--vk-ease);
}

html .blog_listing-link-2:hover img {
  transform: scale(1.05);
}

html .featured-article__content-2 {
  display: flex;
  align-items: center;
  padding: 44px 48px !important;
}

html .blog_listing-item--card-2 .post_wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

html .blog_listing-item--card-2 .post_header,
html .blog_listing-item--card-2 .post_content {
  padding: 0 !important;
}

html .blog_listing-wrapper-2 .post .post_title {
  padding: 0;
  font-size: 20px;
  line-height: 1.25;
}

html .blog_listing-item--featured-2 .post .post_title {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.12;
}

html .blog_listing-wrapper-2 .post_excerpt {
  margin-bottom: 18px !important;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--vk-ink-soft);
}

html .blog_listing-wrapper-2 .post_excerpt p {
  margin: 10px 0 0;
  font-size: inherit;
  line-height: inherit;
}

html .blog_listing-wrapper-2 .post_details {
  margin: auto 0 0 !important;
}

@media screen and (max-width: 1000px) {
  html .blog_listing-wrapper-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 680px) {
  html .blog_listing-wrapper-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  html .featured-article-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  html .featured-article__media-2 {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  html .featured-article__content-2 {
    padding: 22px 24px 24px !important;
  }
}

.post .post_title {
  font-weight: 500;
  line-height: 1.15;
}

.post .post_date,
.post .post_author {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

/* Product list pages: the same cards as the homepage categories */

/* Cards in a row are equally tall */
html .product_item > .mar_0-16 {
  height: 100%;
}

html .product_item-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--vk-radius);
  background-color: var(--vk-tile, var(--vk-tile-3)) !important;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(110% 70% at 50% 108%, rgba(31, 42, 34, 0.07) 0%, rgba(31, 42, 34, 0) 70%) !important;
  box-shadow: 0 1px 2px rgba(31, 42, 34, 0.04), 0 10px 30px -18px rgba(31, 42, 34, 0.25);
  overflow: hidden;
  transition: transform 0.5s var(--vk-ease), box-shadow 0.5s var(--vk-ease);
}

html .product_item-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(31, 42, 34, 0.05), 0 24px 50px -20px rgba(31, 42, 34, 0.35);
}

.product_item-wrap .item-top,
.product_item-wrap .top-inner {
  background: transparent !important;
  overflow: hidden;
}

/* The picture area grows a little on hover. (The image itself is placed
   by Voog with a transform, so it is never transformed here.) */
.product_item-wrap .item-top {
  position: relative;
  transform-origin: 50% 0;
  transition: transform 0.7s var(--vk-ease);
}

.product_item-wrap:hover .item-top {
  transform: scale(1.03);
}

/* Cut-out products and plain-background shots: whole, with room around,
   light backgrounds melted into the card colour */
.product_item-wrap.vk-img-cutout .item-top img,
.product_item-wrap.vk-img-plain .item-top img {
  object-fit: contain !important;
  padding: 8%;
  box-sizing: border-box;
  mix-blend-mode: multiply;
}

/* Photos: fill the picture area, no coloured bars beside them */
.product_item-wrap.vk-img-photo .item-top img {
  object-fit: cover !important;
}

/* Pictures that cannot be inspected: whole, on a blurred copy of itself */
.product_item-wrap.vk-img-unknown .item-top img {
  object-fit: contain !important;
}

/* ::after, not ::before: main.min.css's .item-top::before is the spacer
   that makes the picture box square */
.product_item-wrap.vk-img-unknown .item-top {
  isolation: isolate;
}

.product_item-wrap.vk-img-unknown .item-top::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vk-pic) center / cover no-repeat;
  filter: blur(26px) saturate(1.1);
  transform: scale(1.3);
  opacity: 0.6;
  pointer-events: none;
}

/* main.min.css fades the picture and name to 70% on hover; the card's
   lift and zoom are the hover effect now */
html .product_item-wrap:hover .product_image,
html .product_item-wrap:hover .item-top,
html .product_item-wrap:hover .product_item-title {
  opacity: 1;
}

html .product_item-wrap.vk-edge-dark .product_item-btn {
  color: #fff;
}

/* "Look closer" link under the name */
html .product_item-wrap .product_item-btn {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vk-forest);
}

html .product_item-wrap .product_item-btn::after {
  content: ' \2192';
}

/* The photo's bottom colour continues into the text area, with a soft
   fade, so photo and name read as one piece */
html .product_item-wrap.vk-edge {
  background-color: var(--vk-edge) !important;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.1) 100%) !important;
}

.product_item-wrap.vk-edge .item-top {
  position: relative;
}

.product_item-wrap.vk-edge .item-top::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--vk-edge) 92%);
  pointer-events: none;
}

.product_item-wrap.vk-edge-dark .product_item-title.p14,
.product_item-wrap.vk-edge-dark .product_item-price,
.product_item-wrap.vk-edge-dark .product_item-details {
  color: #fff !important;
}

.product_item:nth-child(7n + 1) { --vk-tile: var(--vk-tile-1); }
.product_item:nth-child(7n + 2) { --vk-tile: var(--vk-tile-2); }
.product_item:nth-child(7n + 3) { --vk-tile: var(--vk-tile-3); }
.product_item:nth-child(7n + 4) { --vk-tile: var(--vk-tile-4); }
.product_item:nth-child(7n + 5) { --vk-tile: var(--vk-tile-5); }
.product_item:nth-child(7n + 6) { --vk-tile: var(--vk-tile-6); }
.product_item:nth-child(7n + 7) { --vk-tile: var(--vk-tile-7); }

.product_item-wrap .product_item-details--alignment {
  padding: 14px 22px 22px;
}

/* .p14 is a 14px utility class on the title; this wins over it */
.product_item-wrap .product_item-title.p14 {
  font-family: var(--vk-font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--vk-ink);
}

.product_item-wrap a {
  text-decoration: none;
}

@media screen and (max-width: 640px) {
  .product_item-wrap .product_item-details--alignment {
    padding: 2px 14px 14px;
  }

  .product_item-wrap .product_item-title.p14 {
    font-size: 16px;
  }
}

/* Shop grid spacing: the gutter between cards in both directions, the
   heading distance under the page title, and no padding of its own
   (main.css used 40px above and below plus 32px under every row) */
.product_list-page main .content-body.mar_b-48 {
  margin-bottom: var(--vk-space-head);
}

html .product_list.flex_row {
  margin: 0 calc(var(--vk-space-gutter) / -2) calc(var(--vk-space-gutter) * -1);
  padding: 0;
}

html .product_list .flex_row-3--item {
  margin-bottom: var(--vk-space-gutter);
}

html .product_list .product_item > .mar_0-16 {
  margin: 0 calc(var(--vk-space-gutter) / 2);
}

/* Phones: two products per row, like a shop window, instead of one
   screen-high card each */
@media screen and (max-width: 480px) {
  html .product_list .flex_row-3--item {
    width: 50%;
  }

  .product_item-wrap .product_item-details--alignment {
    padding: 2px 12px 12px;
  }

  .product_item-wrap .product_item-title.p14 {
    font-size: 14.5px;
    line-height: 1.25;
  }
}

/* ------------------------------------------------------------------ */
/* Content blocks: open, editorial layout (no boxes around text)       */
/* ------------------------------------------------------------------ */

.block-container-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-section);
}

/* Voog adds 8px under every block; the gap above is the only spacing */
html .block-container-wrap > .block-container {
  margin-bottom: 0;
}

html .block-container {
  margin: 0;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Voog's block spacing setting; the gap above does the spacing now */
html .block-container [class*="column-container-"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Text starts and ends exactly at the block's edges, however deeply the
   editor nested it, so the gaps between blocks are the real gaps.
   (Empty paragraphs at the edges are removed by vinkymon-theme.js.) */
.block-container .col-item > :first-child,
.block-container .col-item > :first-child > :first-child,
.block-container .col-item > :first-child > :first-child > :first-child {
  margin-top: 0 !important;
}

.block-container .col-item > :last-child,
.block-container .col-item > :last-child > :last-child,
.block-container .col-item > :last-child > :last-child > :last-child {
  margin-bottom: 0 !important;
}

/* Voog pads every column 32px at the bottom and pulls the row back up by
   32px; that only cancels out on the last row. Columns use the gutter. */
html .block-container [class*="column-container-"] {
  margin-bottom: 0 !important;
  row-gap: var(--vk-space-head);
}

html .block-container .col-item {
  padding-bottom: 0 !important;
}

/* Justified text leaves uneven gaps between words; keep it ragged-right */
.block-container .col-item [style*="justify"],
.content-formatted [style*="justify"] {
  text-align: left !important;
}

/* Opening paragraph (a block with one short, centred text): a large,
   light serif lead instead of bold body text. vinkymon-theme.js adds
   .vk-lead. */
.block-container.vk-lead .col-item {
  max-width: 860px;
  margin: 0 auto;
}

.block-container.vk-lead p,
.block-container.vk-lead p b,
.block-container.vk-lead p strong {
  font-family: var(--vk-font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 400 !important;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--vk-ink);
}

/* Several text columns side by side: soft panels in the product card
   colours, so text and products read as one family */
.block-container.vk-columns [class*="column-container-"] {
  gap: var(--vk-space-gutter);
  flex-wrap: nowrap;
  align-items: stretch;
  /* Voog pulls columns out by their padding, which the panels replace */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.block-container.vk-columns .col-item:not(.vk-empty) {
  position: relative;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 34px 32px 36px !important;
  border-radius: var(--vk-radius);
  background-color: var(--vk-tile, var(--vk-tile-1));
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(110% 70% at 50% 108%, rgba(31, 42, 34, 0.06) 0%, rgba(31, 42, 34, 0) 70%);
  box-sizing: border-box;
}

.block-container.vk-columns .col-item:nth-child(4n + 1) { --vk-tile: var(--vk-tile-1); }
.block-container.vk-columns .col-item:nth-child(4n + 2) { --vk-tile: var(--vk-tile-5); }
.block-container.vk-columns .col-item:nth-child(4n + 3) { --vk-tile: var(--vk-tile-2); }
.block-container.vk-columns .col-item:nth-child(4n + 4) { --vk-tile: var(--vk-tile-6); }

.block-container.vk-columns .vk-col-title,
.block-container.vk-columns .vk-col-title *,
.block-container.vk-columns h1,
.block-container.vk-columns h2,
.block-container.vk-columns h3,
.block-container.vk-columns h4 {
  margin: 0 0 12px;
  font-family: var(--vk-font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--vk-ink) !important;
}

.block-container.vk-columns .vk-col-title * {
  margin: 0;
}

.block-container.vk-columns p:not(.vk-col-title) {
  font-size: 15px;
  line-height: 1.75;
  color: var(--vk-ink-soft);
}

/* Buttons inside panels keep their size and do not wrap */
.block-container .custom-btn {
  display: inline-block;
  white-space: nowrap;
}

/* Pictures next to text (e.g. a product and its description): two open
   columns, picture side and text side, no panels */
.block-container.vk-columns-media [class*="column-container-"] {
  flex-wrap: nowrap;
  align-items: center;
  gap: 56px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.block-container.vk-columns-media .col-item:not(.vk-empty) {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}

.block-container.vk-columns-media .col-item img {
  max-width: 100%;
  height: auto;
}

/* Empty blocks and columns are hidden for visitors (vinkymon-theme.js) */
.publicmode .block-container.vk-empty,
.publicmode .block-container .col-item.vk-empty {
  display: none;
}

/* Contact page: here the blocks are cards (person, location, map) */
html .contact-page .block-container {
  padding: 44px 48px !important;
  border-radius: var(--vk-radius-lg);
  background: var(--vk-paper);
  box-shadow: var(--vk-shadow);
}

.contact-page .block-container-wrap {
  gap: var(--vk-space-gutter);
}

@media screen and (max-width: 760px) {
  .block-container.vk-columns [class*="column-container-"],
  .block-container.vk-columns-media [class*="column-container-"] {
    flex-direction: column;
    gap: var(--vk-space-gutter);
  }

  .block-container.vk-columns-media [class*="column-container-"] {
    gap: var(--vk-space-head);
  }

  .block-container.vk-columns .col-item:not(.vk-empty) {
    padding: 26px 24px 28px !important;
  }



  html .contact-page .block-container {
    padding: 28px 22px !important;
    border-radius: var(--vk-radius);
  }
}

/* A block that vinkymon-theme.js turned into product cards: the cards are
   the cards, so the block itself has no card around them */
html .block-container.vk-has-grid {
  padding: 0 !important;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.vk-card-list {
  margin-top: var(--vk-space-head);
}

.vk-card-list:first-child {
  margin-top: 0;
}

/* The list may sit in one of several columns; give it the full width */
html .block-container.vk-has-grid [class*="column-container-"] {
  justify-content: stretch;
  /* Voog pulls columns out by -16px on phones; cards keep the page gutter */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html .block-container.vk-has-grid .col-item:not(.vk-empty) {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Cards are links inside text content; no link underline or colour */
html .vk-card-list a.pcard,
html .vk-card-list a.pcard * {
  text-decoration: none !important;
}

html .vk-card-list .pcard-title {
  color: var(--vk-ink);
}

/* A block with only a heading in it: a section title, no card */
html .block-container.vk-title-block {
  padding: 0 !important;
  background: none;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
}

/* A title is followed by what it introduces: the heading distance, not a
   full section break */
html .block-container-wrap > .block-container.vk-title-block + .block-container,
html .block-container-wrap > .block-container.vk-title-block + style + .block-container {
  margin-top: calc(var(--vk-space-head) - var(--vk-space-section));
}

html .block-container.vk-title-block h1,
html .block-container.vk-title-block h2,
html .block-container.vk-title-block h3,
html .block-container.vk-title-block h4 {
  margin: 0;
  font-family: var(--vk-font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--vk-ink);
}

/* ------------------------------------------------------------------ */
/* Page heading (used by the Contact layout)                           */
/* ------------------------------------------------------------------ */

.vk-page-head {
  max-width: 720px;
  margin: 0 auto var(--vk-space-head);
  text-align: center;
}

.vk-page-title {
  margin: 0;
  font-family: var(--vk-font-display);
  font-size: clamp(34px, 4.2vw, 50px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--vk-ink);
}

.vk-page-lede {
  margin-top: 16px;
  font-size: 17px;
  color: var(--vk-ink-soft);
}

/* ------------------------------------------------------------------ */
/* Contact layout (layouts/contact.tpl)                                */
/* ------------------------------------------------------------------ */


/* For visitors: person and location side by side, the map full width.
   In the editor the blocks stay stacked so all the block tools work. */
.publicmode .contact-page .block-container-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--vk-space-gutter);
  align-items: stretch;
}

.publicmode .contact-page .block-container.vk-has-map {
  grid-column: 1 / -1;
}

/* Voog centres columns and gives them a minimum width; inside a card the
   text should start at the left edge */
.publicmode .contact-page [class*="column-container-"] {
  justify-content: flex-start;
}

.publicmode .contact-page .block-container .col-item {
  min-width: 0 !important;
}

.publicmode .contact-page .block-container .col-item:not(.vk-empty) {
  flex: 1 1 auto;
}

.contact-page .block-container.vk-has-map {
  padding: 8px !important;
  overflow: hidden;
}

.contact-page .block-container iframe {
  display: block;
  width: 100% !important;
  height: 440px;
  border: 0;
  border-radius: calc(var(--vk-radius-lg) - 8px);
  filter: saturate(0.85);
}

/* Person card: name in the display font, role as a small label */
.contact-page .block-container h3 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 500;
}

.contact-page .block-container h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}

.contact-page .block-container p > b:first-child,
.contact-page .block-container p > strong:first-child {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vk-quince);
}

/* Phone and e-mail rows with round icons (vinkymon-theme.js makes them) */
.contact-page a.vk-contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin: 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--vk-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-page a.vk-contact-link::before {
  content: '';
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--vk-cream);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: background-color 0.25s ease, transform 0.25s var(--vk-ease);
}

.contact-page a.vk-contact-link--phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

.contact-page a.vk-contact-link--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

html .contact-page a.vk-contact-link {
  text-decoration: none;
}

.contact-page a.vk-contact-link:hover {
  color: var(--vk-quince);
}



.contact-page a.vk-contact-link:hover::before {
  background-color: var(--vk-quince-soft);
  transform: scale(1.06);
}

@media screen and (max-width: 760px) {
  .publicmode .contact-page .block-container-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .contact-page .block-container iframe {
    height: 320px;
    border-radius: calc(var(--vk-radius) - 8px);
  }
}

/* ------------------------------------------------------------------ */
/* Product page (layouts/product.tpl)                                  */
/* ------------------------------------------------------------------ */

/* Breadcrumbs sit one section under the navbar, the product a heading
   distance under them */
.product-page .container > .mar_t-32.mar_b-32 {
  margin-top: 0;
  margin-bottom: var(--vk-space-head);
}

/* Nothing at the bottom of the columns adds to the break before the
   newsletter */
.product-page main .flex_row-2 > *,
.product-page main .flex_row-2 > * > :last-child,
.product-page main .flex_row-2 > * > :last-child > :last-child,
.product-page main .content-formatted > :last-child {
  margin-bottom: 0 !important;
}

/* Product name: large, like the other page titles */
.product-page .flex_row-2--item-40 .content-formatted h1,
.product-page .flex_row-2--item-40 .content-formatted h2,
.product-page .flex_row-2--item-40 .content-formatted h3 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Main picture and gallery thumbnails with the same rounded corners as
   the cards */
.product-page .js-product-page-image img,
.product-page .js-product-page-image .item-top,
.product-page .edys-gallery-item,
.product-page .edys-gallery-item img {
  border-radius: var(--vk-radius-sm);
}

.product-page .js-product-page-image .item-top {
  overflow: hidden;
}

/* On phones main.css pulls the two product columns out by 32px, more
   than the 16px page padding, so the page got wider than the screen */
@media screen and (max-width: 900px) {
  .product-page .flex_row-2.mar_0-32-neg {
    margin-left: 0;
    margin-right: 0;
  }

  .product-page .flex_row-2.mar_0-32-neg .mar_0-32 {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Nutrition and other tables: a quiet card with hairline rows. The
   editor stores black borders and fixed widths inline, hence !important. */
.product-page .content-formatted table {
  width: 100% !important;
  margin: 8px 0 20px;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--vk-radius-sm);
  background: var(--vk-paper);
  box-shadow: 0 0 0 1px var(--vk-line), var(--vk-shadow);
  overflow: hidden;
}

.product-page .content-formatted table tr {
  background: none !important;
}

.product-page .content-formatted table td {
  width: auto !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--vk-line) !important;
  background: none !important;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vk-ink-soft);
}

.product-page .content-formatted table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--vk-ink);
}

.product-page .content-formatted table tr:last-child td {
  border-bottom: 0 !important;
}

/* First row is the table's heading */
.product-page .content-formatted table tr:first-child td {
  padding-top: 14px !important;
  padding-bottom: 12px !important;
  background: rgba(31, 42, 34, 0.035) !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-ink);
}

.product-page .content-formatted table td * {
  font-size: inherit !important;
  font-weight: inherit;
}

/* ------------------------------------------------------------------ */
/* Newsletter (components/newsletter.tpl) and footer                   */
/* ------------------------------------------------------------------ */

.footer .footer_separator {
  display: none;
}

/* Same width as the content above it; text left, form right */
html body .footer .nl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "label form"
    "intro disclaimer"
    "intro msg";
  column-gap: 64px;
  align-items: start;
  /* the footer's inner width is the page content width, so 100% here
     lines up with the content above */
  width: 100%;
  max-width: var(--container-max-width, 1080px);
  margin: var(--vk-space-section) auto var(--vk-space-gutter);
  padding: 56px 64px;
  border-radius: var(--vk-radius-lg);
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(239, 216, 90, 0.2) 0%, rgba(239, 216, 90, 0) 60%),
    var(--vk-forest);
  color: #fff;
  text-align: left;
  box-sizing: border-box;
}

html body .footer .nl .nl-label {
  grid-area: label;
  margin: 0 0 12px;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
  color: #fff;
}

.footer .nl .nl-intro {
  grid-area: intro;
  max-width: 420px;
  margin: 0;
  font-size: 15px;
  text-align: left;
  color: rgba(255, 255, 255, 0.78);
}

.footer .nl .nl-form {
  grid-area: form;
  align-self: end;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-sizing: border-box;
}

.footer .nl .nl-disclaimer {
  grid-area: disclaimer;
  margin: 12px 0 0 18px;
  font-size: 12.5px;
  text-align: left;
  color: rgba(255, 255, 255, 0.62);
}

.footer .nl .nl-msg {
  grid-area: msg;
  margin: 8px 0 0 18px;
  text-align: left;
}

.footer .nl .nl-msg:empty {
  display: none;
}

.footer .nl .nl-disclaimer a {
  color: #fff;
}

.footer .nl .nl-input,
.footer .nl .nl-btn {
  font-family: inherit;
}

.footer .nl .nl-input {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 12px 18px;
  color: #fff;
}

.footer .nl .nl-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.footer .nl .nl-input:focus {
  outline: none;
  box-shadow: none;
}

.footer .nl .nl-form:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
}

.footer .nl .nl-btn {
  padding: 11px 24px;
  border: 0;
  background: var(--vk-lemon);
  color: var(--vk-ink);
  font-size: 14px;
  font-weight: 600;
}

.footer .nl .nl-btn:hover {
  background: #fff;
  color: var(--vk-ink);
}

.footer .nl .nl-msg--ok {
  color: #c9f2d6;
}

.footer .nl .nl-msg--err {
  color: #ffd2c4;
}

/* Footer columns ("Asukoht", "Kontakt", …): one card, same width */
.publicmode .footer .flex_row.vk-footer-row {
  width: 100%;
  max-width: var(--container-max-width, 1080px);
  margin: 0 auto var(--vk-space-head);
  padding: 36px 48px;
  border-radius: var(--vk-radius-lg);
  background: var(--vk-paper);
  box-shadow: var(--vk-shadow);
  box-sizing: border-box;
  gap: 32px;
}

.publicmode .footer .flex_row.vk-empty,
.publicmode .footer .flex_row.vk-footer-row .footer_content-hidden {
  display: none;
}

.publicmode .footer .flex_row.vk-footer-row .footer_content {
  flex: 1 1 0;
  max-width: none;
}

.footer .footer_content h1,
.footer .footer_content h2,
.footer .footer_content h3,
.footer .footer_content h4 {
  margin: 0 0 10px;
  font-family: var(--vk-font-body) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vk-quince);
}

.footer .footer_content .content-formatted > :last-child {
  margin-bottom: 0;
}

.footer .footer_content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--vk-ink-soft);
}

/* Footer columns: readable dark text on the light card, whatever colour
   the content was given */
.publicmode .footer .flex_row.vk-footer-row .footer_content,
.publicmode .footer .flex_row.vk-footer-row .footer_content p,
.publicmode .footer .flex_row.vk-footer-row .footer_content span {
  color: var(--vk-ink-soft) !important;
}

.publicmode .footer .flex_row.vk-footer-row .footer_content b,
.publicmode .footer .flex_row.vk-footer-row .footer_content strong {
  color: var(--vk-ink) !important;
  font-weight: 600;
}

html .footer .footer_content a {
  color: var(--vk-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 42, 34, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease;
}

html .footer .footer_content a:hover {
  color: var(--vk-quince) !important;
  border-color: var(--vk-quince);
}

@media screen and (max-width: 760px) {
  html body .footer .nl {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "intro"
      "form"
      "disclaimer"
      "msg";
    width: 100%;
    padding: 40px 22px;
    border-radius: var(--vk-radius);
  }

  .footer .nl .nl-intro {
    margin-bottom: 22px;
  }

  .footer .nl .nl-form {
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .footer .nl .nl-input {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
  }

  .footer .nl .nl-disclaimer,
  .footer .nl .nl-msg {
    margin-left: 0;
  }

  .publicmode .footer .flex_row.vk-footer-row {
    flex-direction: column;
    width: 100%;
    padding: 28px 24px;
    gap: 20px;
    border-radius: var(--vk-radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pcard-img,
  .fp-card,
  .fp-thumb img,
  .product_item-wrap,
  .blog_listing-item--card-2,
  .vk-link-arrow::after {
    transition: none !important;
  }
}