/*
 * 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 and below the
              newsletter
     head:    from a section or page title to what it introduces
     gutter:  between cards (grids, 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-nav-h: 72px;
  --vk-bubble-max: 1240px; /* the bubble's width once the page scrolls */
  --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;
  height: calc(var(--vk-bubble-gap) + var(--vk-nav-h));
  padding: var(--vk-bubble-gap) var(--vk-bubble-gap) 0;
  box-sizing: border-box;
  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);
  /* the same corners as the hero banner */
  border-radius: var(--vk-radius-lg);
  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:
    max-width 0.7s var(--vk-ease),
    min-height 0.5s var(--vk-ease),
    padding 0.7s var(--vk-ease),
    background-color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    -webkit-backdrop-filter 0.5s ease,
    backdrop-filter 0.5s 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;
  transition: opacity 0.5s ease;
}

/* 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-bubble-max);
  min-height: var(--vk-nav-h);
  margin: 0 auto;
}

/* One height on every page and scroll position (it used to slim down to
   64px when scrolled, so the homepage and subpages looked different) */
html body.scroll .header_fixed .header_fixed-content {
  min-height: var(--vk-nav-h);
}

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;
}

/* Cart: a pill like the language button, the count in a small badge.
   Voog's script shows it (.visible) once something is in the cart. An
   empty cart takes no room (main.css only shrinks it to 0 wide, which
   still left the gap next to it). */
html .header_fixed .cart_btn:not(.visible) {
  display: none;
}

html .header_fixed .cart_btn.visible {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  height: 40px;
  min-width: 40px;
  margin: 0;
  padding: 0 12px;
  gap: 7px;
  justify-content: center;
  border: 1px solid var(--vk-line);
  border-radius: 999px;
  background: var(--vk-paper);
  color: var(--vk-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html .header_fixed .cart_btn.visible:hover {
  border-color: rgba(31, 42, 34, 0.28);
  box-shadow: 0 4px 14px rgba(31, 42, 34, 0.08);
}

html .header_fixed .cart_btn-icon svg {
  width: 19px;
  height: 19px;
}

html .header_fixed .cart_btn-icon svg g,
html .header_fixed .cart_btn-icon svg path {
  fill: var(--vk-ink);
}

html .header_fixed .cart_btn-count {
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--vk-forest);
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

html .header_fixed .cart_btn-count:empty {
  display: none;
}

html .header_fixed .cart_btn:hover .cart_btn-count {
  opacity: 1;
}

/* 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;
    --vk-nav-h: 60px;
  }

  /* Phone row: burger | logo (centred) | language and cart, inside the
     bubble. A grid with equal side columns keeps the logo in the middle
     whatever sits on the right. */
  html .header_fixed .header_fixed-content,
  html body.scroll .header_fixed .header_fixed-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 8px;
    min-height: 60px;
    padding: 0 10px;
  }


  html .header_fixed .header_fixed-content > .menu-btn {
    justify-self: start;
  }

  html .header_fixed .header_fixed-content > .header_title {
    justify-self: center;
  }

  html .header_fixed .header_fixed-content > .header_components {
    justify-self: end;
    gap: 8px;
  }

  /* Language and cart as round 40px buttons, so the right side stays
     narrow and the logo has room in the middle */
  html .header_fixed .menu-language-btn,
  html.language-flags-enabled.language-names-disabled.language-menu-mode-popover .header_fixed .menu-language-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
  }

  html .header_fixed .menu-language-btn svg,
  html .header_fixed .menu-language-btn .mar_l-4 {
    display: none;
  }

  html.language-flags-enabled .header_fixed .menu-language-btn::before,
  html.language-flags-enabled .header_fixed .menu-language-btn::after {
    left: 50%;
    transform: translate(-50%, -50%) scale(1.15);
    transform-origin: center;
  }

  html .header_fixed .cart_btn.visible {
    width: 40px;
    padding: 0;
  }

  html .header_fixed .cart_btn-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: 10.5px;
    box-shadow: 0 0 0 2px var(--vk-paper);
  }

  html .header_fixed .header_components-menu--top .js-menu-language,
  html .header_fixed .header_components-menu--top .menu-language-toggle {
    display: flex;
  }

  /* An uploaded logo never crowds the buttons */
  html .header_fixed .header_title img {
    max-width: min(38vw, 150px);
    height: auto;
  }

  html .header_fixed .lang_menu-popover--wrap {
    right: 0;
  }

  /* Burger: a 40px button with the icon in its middle, so it sits as far
     from the bubble's edge as the round buttons on the right */
  html .header_fixed .header_fixed-content > .menu-btn {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
    justify-content: center;
    border-radius: 50%;
  }

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

  html .header_fixed .header_title {
    flex: none;
    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: none;
    width: auto;
    min-width: 44px;
  }

  html .header_fixed .header_components-menu--top {
    display: flex;
    align-items: center;
  }
}

/* ------------------------------------------------------------------ */
/* Homepage: the navbar is part of the hero until the page scrolls     */
/* ------------------------------------------------------------------ */

/* components/slider.tpl sets .vk-has-hero; .vk-hero-top is on while the
   page is at the top (vinkymon-theme.js). Without them, or with the side
   menu open, the navbar is the usual bubble. */

/* The hero starts under the navbar, at the same distance from the top as
   from the sides */
html.vk-has-hero .vk-hero {
  margin-top: calc(-1 * var(--vk-nav-h));
}

/* Phones and tablets: the hero runs to the top, left and right edges of
   the screen (rounded only at the bottom); the navbar sits inside it */
@media screen and (max-width: 900px) {
  html.vk-has-hero .vk-hero {
    width: 100%;
    margin-top: calc(-1 * (var(--vk-bubble-gap) + var(--vk-nav-h)));
    border-radius: 0 0 var(--vk-radius-lg) var(--vk-radius-lg);
  }
}

/* A soft shade along the top keeps the white navbar readable on any photo */
html.vk-has-hero .vk-hero__shade {
  background:
    linear-gradient(180deg, rgba(14, 22, 16, 0.5) 0%, rgba(14, 22, 16, 0) 26%),
    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%);
}

/* Joined: as wide as the hero, no glass, contents lined up with the hero
   text */
html.vk-hero-top:not(.semimodal-open) .header_fixed .header_fixed-content {
  max-width: var(--vk-frame-max);
  padding-right: clamp(14px, 4.5vw, 64px);
  padding-left: clamp(20px, 6vw, 88px);
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .header_fixed-content::before {
  opacity: 0;
}

/* Phones: the same small inset on both sides, so the burger and the round
   buttons stay mirrored */
@media screen and (max-width: 900px) {
  html.vk-hero-top:not(.semimodal-open) .header_fixed .header_fixed-content {
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* White logo, links and icons on the photo; they turn dark as the glass
   fades in */
.header_fixed .header_title img,
.header_fixed .menu_top-list > .menu-item > a,
.header_fixed .menu_popover-btn svg,
.header_fixed .menu-stripe,
.header_fixed .menu-language-btn,
.header_fixed .cart_btn.visible {
  transition: color 0.5s ease, filter 0.5s ease, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.3s ease;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .header_title img {
  filter: brightness(0) invert(1);
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_top-list > .menu-item > a,
html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_top-list > .menu-item > a:hover,
html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_top-list > .menu-item > a.active,
html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_top-list > .menu-item > a.selected {
  color: #fff;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_top-list > .menu-item > a {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu-main .menu .menu-item.dd-arrow[data-arrow="active"] {
  background-image: url("../assets/chevron-down-white.svg");
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_popover-btn svg path {
  fill: #fff;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu_popover-btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu-stripe {
  background-color: #fff;
}

/* Language and cart: frosted white outlines on the photo (the language
   selector needs the extra classes to beat the language-menu rules) */
html.vk-hero-top:not(.semimodal-open) .header_fixed .header_components .menu-language-toggle .menu-language-btn,
html.vk-hero-top:not(.semimodal-open) .header_fixed .header_components .cart_btn.visible {
  border-color: rgba(255, 255, 255, 0.42);
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .menu-language-btn svg path {
  stroke: #fff;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .cart_btn-icon svg g,
html.vk-hero-top:not(.semimodal-open) .header_fixed .cart_btn-icon svg path {
  fill: #fff;
}

html.vk-hero-top:not(.semimodal-open) .header_fixed .cart_btn-count {
  background: #fff;
  color: var(--vk-forest);
}

@media (prefers-reduced-motion: reduce) {
  html .header_fixed .header_fixed-content,
  html .header_fixed .header_fixed-content::before,
  .header_fixed .header_title img,
  .header_fixed .menu_top-list > .menu-item > a,
  .header_fixed .menu-language-btn,
  .header_fixed .cart_btn.visible {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* 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;
  }
}

/* The navbar bubble stays on top of the open drawer and already shows the
   logo and the close button, so the drawer shows neither. Its content
   starts below the bubble. */
html:not(.semimodal-relative) .semimodal .site_title,
html.publicmode:not(.semimodal-relative) .semimodal .semimodal_inner > .flex_box {
  display: none;
}

html:not(.semimodal-relative) .semimodal .semimodal_inner {
  padding: calc(var(--vk-bubble-gap) + 60px + 40px) 40px 48px;
}

@media screen and (max-width: 640px) {
  html:not(.semimodal-relative) .semimodal .semimodal_inner {
    padding: calc(var(--vk-bubble-gap) + 60px + 28px) 24px 40px;
  }
}

/* Menu: rows of equal height, an arrow at the end, hairlines between */
html .semimodal .menu_semimodal-list > .menu-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--vk-line);
}

html .semimodal .menu_semimodal-list > .menu-item > a {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 68px;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--vk-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--vk-ink);
  transition: color 0.25s ease;
}

html .semimodal .menu_semimodal-list > .menu-item > a::after {
  content: '→';
  position: static;
  width: auto;
  height: auto;
  margin-left: auto;
  background: none !important;
  font-family: var(--vk-font-body);
  font-size: 18px;
  color: var(--vk-muted);
  transition: transform 0.35s var(--vk-ease), color 0.25s ease;
}

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

html .semimodal .menu_semimodal-list > .menu-item > a:hover::after {
  color: var(--vk-quince);
  transform: translateX(4px);
}

/* Sub pages (Tooted -> Limonaadid, ...): chips that fold open under
   their parent. Closed, every row is the same height. The chevron button
   (vinkymon-theme.js) opens them; the name still goes to the page. */
html .semimodal .menu_semimodal-list .dropdown_menu-popover--wrap {
  position: static;
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: grid-template-rows 0.45s var(--vk-ease), opacity 0.3s ease, padding 0.45s var(--vk-ease);
}

html .semimodal .menu_semimodal-list .menu-item.vk-open > .dropdown_menu-popover--wrap {
  grid-template-rows: 1fr;
  padding: 0 0 20px;
  opacity: 1;
  pointer-events: auto;
}

html .semimodal .menu_semimodal-list .dropdown_menu-popover--wrap > * {
  min-height: 0;
  overflow: hidden;
}

/* Rows with sub pages: the chevron replaces the arrow */
html .semimodal .menu_semimodal-list > .menu-item.vk-has-sub > a::after {
  display: none;
}

/* main.min.css draws its own chevron as a background on these links */
html .semimodal .menu-main .menu .has-children a,
html .semimodal .menu_semimodal-list .menu-item a {
  background-image: none !important;
}

html .semimodal .menu-main .menu_semimodal-list > .has-children > a {
  padding-right: 0;
}

/* The theme also lists the current section's sub pages below it; the
   chips above already show them */
html .semimodal .menu_semimodal-list > :not(.menu-item):has(> .menu-sub),
html .semimodal .menu_semimodal-list .menu-sub {
  display: none;
}

.vk-sub-toggle {
  position: absolute;
  top: 14px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--vk-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vk-sub-toggle:hover {
  background: var(--vk-cream);
  color: var(--vk-ink);
}

.vk-sub-toggle svg {
  transition: transform 0.4s var(--vk-ease);
}

.vk-open > .vk-sub-toggle svg {
  transform: rotate(180deg);
}

html .semimodal .menu_semimodal-list .dropdown_menu-popover {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* main.css sets the column direction with !important */
html .semimodal .menu_semimodal-list .dropdown_menu-popover .menu {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 8px;
}

html .semimodal .menu_semimodal-list .dropdown_menu-popover .menu .menu-item {
  width: auto;
  border-radius: 999px;
}

html .semimodal .menu_semimodal-list .dropdown_menu-popover .menu .menu-item a {
  padding: 8px 14px;
  border: 1px solid var(--vk-line);
  border-radius: 999px;
  background: var(--vk-paper);
  font-size: 14px;
  white-space: nowrap;
}

html .semimodal .menu_semimodal-list .dropdown_menu-popover .menu .menu-item:hover {
  background: none;
}

html .semimodal .menu_semimodal-list .dropdown_menu-popover .menu .menu-item a:hover {
  border-color: rgba(31, 42, 34, 0.3);
}

/* The arrow next to "Tooted" opened the dropdown; the chips replace it */
html .semimodal .menu_semimodal-list .dd-arrow::after,
html .semimodal .menu_semimodal-list .dd-arrow > .menu-item-arrow {
  display: none;
}

.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,
.vk-hero--paused .vk-hero__bar.is-active > span,
.vk-hero--paused .vk-hero__media {
  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 and pictures that cannot be inspected sit in a rounded frame
   inside the card, with the card colour around them, so they never run
   edge to edge */
/* (a clip, not a margin: the frame appears without moving anything) */
.product_item-wrap.vk-img-photo .item-top,
.product_item-wrap.vk-img-unknown .item-top {
  -webkit-clip-path: inset(12px 12px 0 round var(--vk-radius-sm));
  clip-path: inset(12px 12px 0 round var(--vk-radius-sm));
  transform-origin: 50% 50%;
}

.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;
  padding: 7%;
  box-sizing: border-box;
}

/* ::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;
}

/* "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';
}

.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;
  }
}

/* Price: larger and in the display font, so it reads at a glance.
   (On hover Voog swaps it for the "Add to cart" button.) */
/* The price sits on a light pill, so it stands clear of the card's
   colour and the name above it */
html .product_item-wrap .product_item-price {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 6px 14px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 2px rgba(31, 42, 34, 0.06), 0 6px 16px -10px rgba(31, 42, 34, 0.35);
  font-family: var(--vk-font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--vk-forest);
}

html .product_item-wrap .product_item-price .pad_0-4 {
  padding: 0 6px;
  color: var(--vk-muted);
}

/* "Add to cart" / "Look closer" in the place of the price on hover */
/* "Add to cart" / "Look closer" takes the price's place on hover: the same
   pill, dark */
html .product_item-wrap .product_item-btn.p-abs {
  margin-top: 10px;
  padding: 10px 16px 10px;
  border-radius: 999px;
  background: var(--vk-forest);
  font-size: 12.5px;
  line-height: 1.2;
  color: #fff;
  box-shadow: 0 6px 16px -10px rgba(31, 42, 34, 0.6);
}

html .product_item-wrap .product_item-btn.p-abs:hover {
  background: var(--vk-ink);
}

/* Badges (sold out, or a label set in the product settings): a small pill
   on the picture, top left, instead of a box hanging below the card */
html .product_item-wrap .product_item-box--label.vk-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 2px 10px rgba(31, 42, 34, 0.12);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--vk-ink);
}

html .product_item-wrap .product_item-box--label.vk-badge--soldout,
html .product-page .product_item-box--label.vk-badge--soldout {
  background: var(--vk-forest);
  color: #fff;
}

/* Sold-out products: the picture steps back, the price is muted */
.product_item.vk-soldout .item-top img {
  filter: grayscale(0.5);
  opacity: 0.7;
}

html .product_item.vk-soldout .product_item-price {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  color: var(--vk-muted);
}

/* Product page: the sold-out badge under the name */
html .product-page .product_item-box--label.vk-badge--soldout {
  display: inline-flex;
  margin-top: 16px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media screen and (max-width: 480px) {
  html .product_item-wrap .product_item-price {
    padding: 5px 11px 6px;
    font-size: 17px;
  }

  html .product_item-wrap .product_item-box--label.vk-badge {
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    font-size: 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Shop filters (components/product-list-filter.tpl)                   */
/* ------------------------------------------------------------------ */

/* main.css draws a bar with a black line under it; here: category chips,
   then search and sort as pills, a heading distance above the products */
html .product_filters.vk-shop-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 0 0 var(--vk-space-head);
  padding: 0;
  border: 0;
}

/* Shown from the first paint (not after global.js), so the products never
   jump down; hidden only when there is nothing to filter or sort */
html .product_filters.vk-shop-filters.d-none,
html body:not(:has(.product_list .js-product-whith-data ~ .js-product-whith-data)) .vk-shop-filters {
  display: none;
}

.vk-shop-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.vk-chip {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid var(--vk-line);
  border-radius: 999px;
  background: var(--vk-paper);
  font-family: var(--vk-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--vk-ink-soft);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.vk-chip:hover {
  border-color: rgba(31, 42, 34, 0.3);
  color: var(--vk-ink);
}

.vk-chip.is-active {
  border-color: var(--vk-forest);
  background: var(--vk-forest);
  color: #fff;
}

.vk-chip.is-loading {
  opacity: 0.6;
  cursor: progress;
}

.vk-shop-tools {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.vk-shop-search,
.vk-shop-sort {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  border: 1px solid var(--vk-line);
  border-radius: 999px;
  background: var(--vk-paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vk-shop-search {
  flex: 0 1 440px;
  padding: 0 20px 0 46px;
  cursor: text;
}

.vk-shop-search svg {
  position: absolute;
  left: 19px;
  color: var(--vk-muted);
}

.vk-shop-search input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  font-family: var(--vk-font-body);
  font-size: 15px;
  color: var(--vk-ink);
}

.vk-shop-search input::placeholder {
  color: var(--vk-muted);
  opacity: 1;
}

.vk-shop-search:focus-within,
.vk-shop-sort:focus-within {
  border-color: rgba(31, 58, 43, 0.45);
  box-shadow: 0 0 0 4px rgba(31, 58, 43, 0.08);
}

.vk-shop-sort {
  flex: 0 0 auto;
  gap: 10px;
  padding: 0 40px 0 20px;
  cursor: pointer;
}

.vk-shop-sort-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

.vk-shop-sort select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--vk-font-body);
  font-size: 15px;
  color: var(--vk-ink);
  cursor: pointer;
}

.vk-shop-sort svg {
  position: absolute;
  right: 18px;
  color: var(--vk-ink-soft);
  pointer-events: none;
  transition: transform 0.3s var(--vk-ease);
}

/* The sort menu (vinkymon-theme.js): a button showing the choice and a
   list in the site's style, in place of the browser's select list */
.vk-shop-sort.vk-sort-ready {
  padding: 0;
}

.vk-shop-sort.vk-sort-ready select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.vk-shop-sort.vk-sort-ready .vk-shop-sort-label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
}

.vk-sort-btn {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  /* room for the label on the left and the chevron on the right */
  padding: 0 44px 0 calc(20px + var(--vk-sort-label-w, 76px));
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: none;
  font-family: var(--vk-font-body);
  font-size: 15px;
  line-height: 1;
  color: var(--vk-ink);
  white-space: nowrap;
  cursor: pointer;
}

.vk-sort-value {
  display: block;
  padding-top: 1px;
}

.vk-shop-sort.is-open {
  border-color: rgba(31, 58, 43, 0.45);
  box-shadow: 0 0 0 4px rgba(31, 58, 43, 0.08);
}

.vk-shop-sort.is-open svg {
  transform: rotate(180deg);
}

.vk-sort-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--vk-line);
  border-radius: var(--vk-radius-sm);
  background: rgba(255, 253, 247, 0.96);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 2px 6px rgba(31, 42, 34, 0.05), 0 24px 48px -20px rgba(31, 42, 34, 0.3);
  outline: 0;
  transform-origin: 50% 0;
  animation: vk-menu-in 0.22s var(--vk-ease) both;
}

.vk-sort-menu[hidden] {
  display: none;
}

@keyframes vk-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.vk-sort-menu li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 11px 40px 11px 14px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.25;
  color: var(--vk-ink-soft);
  white-space: nowrap;
  cursor: pointer;
}

.vk-sort-menu li.is-active {
  background: var(--vk-cream);
  color: var(--vk-ink);
}

.vk-sort-menu li[aria-selected="true"] {
  font-weight: 600;
  color: var(--vk-forest);
}

/* a tick next to the current choice */
.vk-sort-menu li[aria-selected="true"]::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 5px;
  margin-top: -4px;
  border-left: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .vk-sort-menu {
    animation: none;
  }
}

.vk-shop-empty {
  margin: 0 0 var(--vk-space-head);
  text-align: center;
  color: var(--vk-ink-soft);
}

.vk-shop-empty p {
  margin: 0 0 16px;
  font-family: var(--vk-font-display);
  font-size: 22px;
  color: var(--vk-ink);
}

/* Products leaving and joining the list fade in */
.product_list .js-product-item.vk-enter {
  animation: vk-fade-in 0.45s var(--vk-ease) both;
}

@keyframes vk-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Phones: the chips scroll sideways in one row; search and sort stack */
@media screen and (max-width: 640px) {
  /* Each row exactly as wide as the page (the sort list's long option
     names would otherwise widen it) */
  html .product_filters.vk-shop-filters > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  html .product_filters.vk-shop-filters > .vk-shop-cats {
    width: calc(100% + 32px);
    max-width: none;
  }

  .vk-shop-cats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
  }

  .vk-shop-cats::-webkit-scrollbar {
    display: none;
  }

  .vk-shop-tools {
    flex-direction: column;
    gap: 10px;
  }

  .vk-shop-search,
  .vk-shop-sort {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .vk-shop-sort {
    justify-content: space-between;
  }

  .vk-shop-sort select {
    flex: 1;
    text-align: right;
  }

  .vk-sort-btn {
    justify-content: flex-end;
    width: 100%;
  }

  .vk-sort-menu {
    left: 0;
  }
}

/* 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: flex-start;
  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;
}

/* Product gallery (vinkymon-theme.js): the main picture on a soft tile,
   arrows and a counter on it, thumbnails underneath */
.product-page .js-product-page-image.mar_b-32 {
  margin-bottom: var(--vk-space-head);
}

html .product-page .js-product-page-image .item-top {
  border-radius: var(--vk-radius-lg);
  background:
    radial-gradient(75% 65% at 50% 42%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%),
    #efe8da;
  overflow: hidden;
}

html .product-page .js-product-page-image .item-top img {
  box-sizing: border-box;
  padding: 7%;
  border-radius: 0;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Photos (not cut-out products) fill the tile */
html .product-page .js-product-page-image.vk-img-photo .item-top img {
  padding: 0;
  object-fit: cover;
}

html .product-page .js-product-page-image .item-top.is-switching img {
  opacity: 0;
}

.product-page .vk-gallery--zoom {
  cursor: zoom-in;
}

/* The Voog gallery is replaced by the thumbnails (it stays in the page for
   Voog's full-screen view) */
.publicmode .product-page .edys-gallery.vk-gallery-source {
  display: none !important;
}

.vk-gallery__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 4px 16px rgba(31, 42, 34, 0.14);
  color: var(--vk-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s var(--vk-ease), background-color 0.2s ease;
}

.vk-gallery__nav--prev {
  left: 16px;
}

.vk-gallery__nav--next {
  right: 16px;
}

.item-top:hover .vk-gallery__nav,
.vk-gallery__nav:focus-visible {
  opacity: 1;
}

.vk-gallery__nav:hover {
  background: #fff;
  transform: scale(1.06);
}

@media (hover: none) {
  .vk-gallery__nav {
    opacity: 1;
  }
}

.vk-gallery__count {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  left: 50%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 42, 34, 0.72);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.vk-gallery__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vk-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.vk-gallery__thumb {
  flex: 0 0 84px;
  height: 84px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--vk-line);
  border-radius: 14px;
  background: var(--vk-paper);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.25s var(--vk-ease);
}

html .product-page .vk-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.vk-gallery__thumb:hover {
  border-color: rgba(31, 42, 34, 0.3);
  transform: translateY(-2px);
}

.vk-gallery__thumb.is-active {
  border-color: var(--vk-forest);
  box-shadow: 0 0 0 1px var(--vk-forest);
}

@media screen and (max-width: 640px) {
  .vk-gallery__thumbs {
    gap: 8px;
    margin-top: 12px;
  }

  .vk-gallery__thumb {
    flex-basis: 64px;
    height: 64px;
    padding: 4px;
    border-radius: 12px;
  }

  .vk-gallery__nav {
    width: 38px;
    height: 38px;
    margin-top: -19px;
  }

  .vk-gallery__nav--prev {
    left: 10px;
  }

  .vk-gallery__nav--next {
    right: 10px;
  }
}

/* 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;
  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);
}

/* Icon links (Facebook, Instagram, ...) have no underline. vinkymon-theme.js
   marks links without text, for icons drawn as backgrounds. */
html .footer .footer_content a.vk-icon-link,
html .footer .footer_content a:has(> img:only-child, > svg:only-child, > picture:only-child) {
  border-bottom: 0;
}

@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;
  }
}

/* ==========================================================================
   "Added to cart" notice (components/cart-popover.tpl, shown by global.js)
   main.css pinned it to the very top of the screen under the navbar
   bubble. Here it drops in just below the bubble, lined up with its right
   edge, above everything. A click opens the cart.
   ========================================================================== */
html .cart_popover-wrap {
  top: calc(var(--vk-bubble-gap) + var(--vk-nav-h) + 12px);
  right: max(var(--vk-bubble-gap), calc((100vw - var(--vk-bubble-max)) / 2));
  left: auto;
  z-index: 120;
  width: auto;
  max-width: min(400px, calc(100vw - 2 * var(--vk-bubble-gap)));
  transform: translateY(-10px) scale(0.98);
  transform-origin: 100% 0;
  transition: opacity 0.35s ease, transform 0.5s var(--vk-ease);
}

html .cart_popover-wrap.visible {
  transform: none;
  transition: opacity 0.35s ease, transform 0.5s var(--vk-ease);
}

html .cart_popover-wrap.visible:hover {
  opacity: 1;
}

html .cart_popover {
  gap: 14px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--vk-line);
  border-radius: var(--vk-radius);
  background: rgba(255, 253, 247, 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 2px 6px rgba(31, 42, 34, 0.06), 0 24px 48px -18px rgba(31, 42, 34, 0.35);
  transition: box-shadow 0.3s ease;
}

html .cart_popover-wrap:hover .cart_popover {
  box-shadow: 0 2px 6px rgba(31, 42, 34, 0.08), 0 28px 56px -18px rgba(31, 42, 34, 0.42);
}

html .cart_popover-icon {
  position: relative;
  flex: none;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--vk-forest);
  box-shadow: none;
}

html .cart_popover-icon svg {
  width: 20px;
  height: 20px;
}

/* a small tick on the cart: added */
html .cart_popover-icon::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--vk-paper);
  border-radius: 50%;
  background: var(--vk-lemon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6.2 2 2 4-4.4' fill='none' stroke='%231f3a2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

html .cart_popover-content {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

html .cart_popover-content--info {
  font-family: var(--vk-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vk-ink-soft);
}

/* the product on its own line ("Was added to cart." starts a sentence) */
html .cart_popover-content--product {
  display: block;
  font-family: var(--vk-font-display);
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  color: var(--vk-ink);
}

html .cart_popover-content--view {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vk-forest);
}

html .cart_popover-content--view::after {
  content: ' \2192';
}

@media screen and (max-width: 480px) {
  html .cart_popover-wrap {
    left: var(--vk-bubble-gap);
    right: var(--vk-bubble-gap);
    max-width: none;
    transform-origin: 50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .cart_popover-wrap,
  html .cart_popover-wrap.visible {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

/* Voog's cart window always above the navbar bubble */
html body.edy-ecommerce-modal-open .header_fixed,
html body.edy-ecommerce-modal-open .cart_popover-wrap {
  z-index: 1;
}

/* ==========================================================================
   Voog editor controls (editmode only)
   The theme's rounded popovers and bubbles must leave room for Voog's own
   buttons ("+ Add", settings, pickers), which they used to cut off.
   ========================================================================== */

/* Language menu: "+ Add" and the settings button under the languages,
   inside the popover, on their own row */
html.editmode .lang_menu-popover {
  min-width: 220px;
  overflow: visible;
}

html.editmode .lang_menu-popover .menu.menu-cms {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--vk-line);
}

html.editmode .lang_menu-popover .menu.menu-cms .menu-item {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
}

/* The shop's sort menu is built for visitors only: in the editor the plain
   select is shown alone */
.vk-sort-btn[hidden],
.vk-sort-menu[hidden] {
  display: none !important;
}

/* ==========================================================================
   Product features on category pages (vinkymon-theme.js: makeFeature)
   Pictures on a soft panel, the text centred beside them with room to
   breathe, the small print and the button evenly spaced.
   ========================================================================== */
html .block-container.vk-feature [class*="column-container-"] {
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.block-container-wrap > .vk-feature:nth-of-type(odd) { --vk-feature-tile: var(--vk-tile-1); }
.block-container-wrap > .vk-feature:nth-of-type(even) { --vk-feature-tile: var(--vk-tile-5); }

html .block-container.vk-feature .col-item.vk-feature__media:not(.vk-empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: clamp(300px, 34vw, 460px);
  padding: clamp(24px, 4vw, 48px) !important;
  border-radius: var(--vk-radius-lg);
  background-color: var(--vk-feature-tile, var(--vk-tile-1));
  background-image:
    radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 18% at 50% 96%, rgba(31, 42, 34, 0.1) 0%, rgba(31, 42, 34, 0) 70%);
}

/* Everything in the panel takes its full width: Voog's "full width"
   pictures (width: auto, sized by their own box) would otherwise shrink to
   nothing in the panel's flex row and disappear */
html .block-container.vk-feature .vk-feature__media > * {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

/* a single full-width picture: at most 400px wide, centred, so the
   section keeps its balance */
html .block-container.vk-feature .vk-feature__media > .edy-texteditor-container {
  flex: 0 1 400px;
  margin: 0 auto;
  border-radius: var(--vk-radius);
}

/* the editor's picture wrappers: centred, and the bottles stand on the
   panel (white product backgrounds melt into it) */
html .vk-feature .vk-feature__media .edy-texteditor-container-wrapper {
  text-align: center !important;
  line-height: 0;
}

html .vk-feature .vk-feature__media .edy-texteditor-container {
  margin: 0 8px;
  vertical-align: bottom;
}

html .vk-feature .vk-feature__media img {
  mix-blend-mode: multiply;
}

html .block-container.vk-feature .col-item.vk-feature__text:not(.vk-empty) {
  max-width: 560px !important;
}

/* two or more pictures stand side by side, also on phones */
html .vk-feature .vk-feature__media:has(.edy-texteditor-container ~ .edy-texteditor-container) .edy-texteditor-container {
  max-width: calc(50% - 16px) !important;
}

html .vk-feature .vk-feature__text h2,
html .vk-feature .vk-feature__text h3 {
  margin: 0 0 16px;
  line-height: 1.15;
}

html .vk-feature .vk-feature__text > div,
html .vk-feature .vk-feature__text > p {
  margin: 0;
  line-height: 1.75;
}

/* small print, e.g. "Ostukorvi miinimum summa on 15€" */
html .vk-feature .vk-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 13px !important;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--vk-muted);
}

/* (the note itself 13px even when it carries its own style attribute or
   sits inside a large-text wrapper; what is inside it follows) */
html .vk-feature .vk-note[style] {
  font-size: 13px !important;
}

html .vk-feature .vk-note,
html .vk-feature .vk-note * {
  font-weight: 500 !important;
}

html .vk-feature .vk-note * {
  font-size: inherit !important;
}

html .vk-feature .vk-note::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237b847a' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 7.2v4M8 4.9v.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

html .vk-feature .vk-feature__text .custom-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
}

/* the button right after the text when there is no small print */
html .vk-feature .vk-feature__text > div + .custom-btn,
html .vk-feature .vk-feature__text > p + .custom-btn,
html .vk-feature .vk-feature__text > h3 + .custom-btn {
  margin-top: 28px;
}

html .vk-feature .vk-feature__text .custom-btn::after {
  content: '\2192';
  margin-left: 10px;
  transition: transform 0.3s var(--vk-ease);
}

html .vk-feature .vk-feature__text .custom-btn:hover::after {
  transform: translateX(3px);
}

/* Phones: the pictures first, then the text */
@media screen and (max-width: 760px) {
  /* stacked: each column as tall as its content (flex: 1 1 0 above
     would squeeze them) */
  html .block-container.vk-feature .col-item:not(.vk-empty) {
    flex: none !important;
    width: 100%;
  }

  html .block-container.vk-feature .col-item.vk-feature__media:not(.vk-empty) {
    order: -1;
    min-height: 260px;
  }

  html .block-container.vk-feature [class*="column-container-"] {
    align-items: stretch;
    gap: 28px;
  }
}

/* ==========================================================================
   Cookie consent (components/cookie-consent.tpl, vinkymon-theme.js)
   A glass card at the bottom; "Only necessary" and "Accept all" look the
   same, so neither choice is pushed.
   ========================================================================== */
.vk-consent {
  position: fixed;
  z-index: 130;
  right: var(--vk-bubble-gap);
  bottom: var(--vk-bubble-gap);
  left: var(--vk-bubble-gap);
  box-sizing: border-box;
  width: auto;
  max-width: 560px;
  margin-left: auto;
  padding: 24px;
  border: 1px solid var(--vk-line);
  border-radius: var(--vk-radius-lg);
  background: rgba(255, 253, 247, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 2px 8px rgba(31, 42, 34, 0.06), 0 30px 60px -20px rgba(31, 42, 34, 0.4);
  color: var(--vk-ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.5s var(--vk-ease);
}

.vk-consent.is-in {
  opacity: 1;
  transform: none;
}

.vk-consent__title {
  margin: 0 0 8px;
  font-family: var(--vk-font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vk-ink);
}

.vk-consent__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vk-ink-soft);
}

.vk-consent__text a {
  color: var(--vk-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vk-consent__prefs {
  display: grid;
  gap: 4px;
  margin: 18px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--vk-line);
}

.vk-consent__prefs[hidden] {
  display: none;
}

.vk-consent__opt {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  cursor: pointer;
}

.vk-consent__opt input {
  position: absolute;
  width: 40px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.vk-consent__opt input:disabled {
  cursor: default;
}

.vk-consent__switch {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: rgba(31, 42, 34, 0.18);
  transition: background-color 0.25s ease;
}

.vk-consent__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 42, 34, 0.25);
  transition: transform 0.25s var(--vk-ease);
}

.vk-consent__opt input:checked + .vk-consent__switch {
  background: var(--vk-forest);
}

.vk-consent__opt input:checked + .vk-consent__switch::after {
  transform: translateX(16px);
}

.vk-consent__opt input:disabled + .vk-consent__switch {
  opacity: 0.55;
}

.vk-consent__opt input:focus-visible + .vk-consent__switch {
  outline: 2px solid var(--vk-forest);
  outline-offset: 2px;
}

.vk-consent__opt b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.vk-consent__opt small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vk-muted);
}

.vk-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.vk-consent__btn {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--vk-forest);
  border-radius: 999px;
  background: var(--vk-forest);
  font-family: var(--vk-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vk-consent__btn:hover {
  background: var(--vk-ink);
}

.vk-consent__btn--ghost {
  margin-right: auto;
  border-color: transparent;
  background: none;
  color: var(--vk-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vk-consent__btn--ghost:hover {
  background: none;
  color: var(--vk-ink);
}

.vk-consent__btn[hidden] {
  display: none;
}

.vk-consent__btn:focus-visible {
  outline: 2px solid var(--vk-forest);
  outline-offset: 2px;
}

@media screen and (max-width: 480px) {
  .vk-consent {
    padding: 20px;
  }

  .vk-consent__actions .vk-consent__btn:not(.vk-consent__btn--ghost) {
    flex: 1 1 40%;
  }

  .vk-consent__btn--ghost {
    flex-basis: 100%;
    order: 3;
    margin: 0;
  }
}

/* "Cookies: settings" under the footer, to change one's mind */
.vk-consent-reopen {
  display: block;
  margin: 0 auto;
  padding: 0 16px 28px;
  border: 0;
  background: none;
  font-family: var(--vk-font-body);
  font-size: 13px;
  color: var(--vk-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.vk-consent-reopen[hidden] {
  display: none;
}

.vk-consent-reopen:hover {
  color: var(--vk-ink);
}

@media (prefers-reduced-motion: reduce) {
  .vk-consent {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

.vk-consent__btn--outline {
  margin-right: auto;
  background: transparent;
  color: var(--vk-forest);
}

.vk-consent__btn--outline:hover {
  background: rgba(31, 58, 43, 0.08);
}

@media screen and (max-width: 480px) {
  .vk-consent__btn--outline {
    flex-basis: 100%;
    order: 3;
    margin: 0;
  }
}

/* Voog checkout: the delivery note in the cart (moved here from the site's
   header code) */
.cart-transport-text {
  padding-bottom: 20px;
  font-size: 18px !important;
}

/* ==========================================================================
   Pictures placed with insets instead of main.css's "50% + translate(-50%)
   + padding": Safari sized them larger than their tile (the jar ran out of
   the frame on iPhones). Same result everywhere, no transform.
   ========================================================================== */
html .product-page .js-product-page-image .item-top img.item-image {
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
  padding: 0;
  transform: none;
  object-fit: contain;
}

html .product-page .js-product-page-image.vk-img-photo .item-top img.item-image {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html .product_item-wrap.vk-img-cutout .item-top img.item-image,
html .product_item-wrap.vk-img-plain .item-top img.item-image {
  top: 8%;
  left: 8%;
  width: 84%;
  height: 84%;
  padding: 0;
  transform: none;
}

html .product_item-wrap.vk-img-photo .item-top img.item-image {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

/* ==========================================================================
   Product cards on touch screens: no hover swap. On a phone the first tap
   only "hovered" (price swapped for a button, and a second tap was needed);
   now the price always shows and one tap opens the product.
   ========================================================================== */
@media (hover: none) {
  html .product_item-wrap:hover {
    transform: none;
  }

  html .product_item-wrap:hover .item-top {
    transform: none;
  }

  html .product_item-wrap:hover .product_item-price,
  html .product_item-wrap .product_item-price {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  html .product_item-wrap .product_item-btn.p-abs {
    display: none;
  }
}

/* The hover button never wider than the card (it was cut off on narrow
   cards) */
html .product_item-wrap .product_item-btn.p-abs {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 640px) {
  html .product_item-wrap .product_item-btn.p-abs {
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* ==========================================================================
   Product page: price and "Lisa ostukorvi" (Voog's buy button)
   The price large on its own line, then the variants, then a full,
   comfortable button. (main.css: 4px padding and the price pushed in with
   !important margins, which looked cramped, worst in Safari.)
   ========================================================================== */
html .content-formatted .edy-buy-button-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin: 0 0 24px;
}

html .edy-buy-button-price,
html .content-formatted .edy-buy-button-price {
  display: block;
  margin: 0 !important;
  font-family: var(--vk-font-display);
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--vk-forest);
}

html .content-formatted .edy-buy-button-container .edy-buy-button-variants {
  padding: 0;
}

html .content-formatted .edy-buy-button,
html .content-formatted.js-buy-btn-content .edy-buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--vk-forest);
  font-family: var(--vk-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 10px 24px -14px rgba(31, 42, 34, 0.7);
  transition: background-color 0.2s ease, transform 0.2s var(--vk-ease), box-shadow 0.2s ease;
}

html .content-formatted .edy-buy-button:hover {
  background: var(--vk-ink);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -14px rgba(31, 42, 34, 0.75);
}

html .content-formatted .edy-buy-button:active {
  transform: none;
}

/* a price shown inside the button: same line, separated */
html .content-formatted .edy-buy-button .edy-buy-button-price {
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit;
}

html .content-formatted .edy-buy-button .edy-buy-button-price::before {
  content: '·';
  margin-right: 12px;
  opacity: 0.6;
}

@media screen and (max-width: 900px) {
  html .content-formatted .edy-buy-button,
  html .content-formatted.js-buy-btn-content .edy-buy-button {
    max-width: none;
  }
}

/* Voog's buy button, whatever its exact markup: the price first (it comes
   after the button in Voog's HTML), then the variants, then the button.
   Wrappers around the price may not clip it (its top was cut off in Safari)
   and nothing overlaps. */
html .content-formatted .edy-buy-button-container {
  margin-top: 28px;
}

html .content-formatted .edy-buy-button-container > * {
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

html .content-formatted .edy-buy-button-container > .edy-buy-button-price,
html .content-formatted .edy-buy-button-container > :has(.edy-buy-button-price) {
  order: -2;
}

html .content-formatted .edy-buy-button-container > .edy-buy-button-variants,
html .content-formatted .edy-buy-button-container > :has(.edy-buy-button-variants) {
  order: -1;
}

html .content-formatted .edy-buy-button-container > :has(.edy-buy-button-price) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  line-height: 1.3;
}

html .content-formatted .edy-buy-button-price {
  padding-top: 2px;
  line-height: 1.25 !important;
  overflow: visible;
}

/* the old price, when the product is discounted */
html .content-formatted [class*="edy-buy-button-price-original"] {
  font-size: 18px !important;
  color: var(--vk-muted);
  text-decoration: line-through;
}

/* The price block above "Add to cart" (in the buy box, see "Buy box"):
   the price large, a small note that VAT is included, and room before the
   choice or the button */
html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 40px 0 22px !important;
  padding: 0;
  border: 0;
  line-height: 1.2;
}

/* space after the button, before what follows (nutrition table) */
html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button), .edy-buy-button) {
  margin-bottom: 40px !important;
}

html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price) .edy-buy-button-price,
html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > .edy-buy-button-price {
  font-size: 34px !important;
  letter-spacing: -0.015em;
}

html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price)::after {
  content: 'Hind sisaldab käibemaksu';
  flex-basis: 100%;
  font-family: var(--vk-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

html[lang="en"] :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price)::after { content: 'Price includes VAT'; }
html[lang="ru"] :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price)::after { content: 'Цена с НДС'; }
html[lang="de"] :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price)::after { content: 'Preis inkl. MwSt.'; }

/* the buy button area ends with room before what follows (nutrition table) */
html .content-formatted .edy-buy-button-container {
  margin-bottom: 32px;
}

/* Voog's own box adds no spacing of its own: the price, choice and button
   blocks set it */
html .content-formatted .edy-buy-button-container.vk-buy-box {
  gap: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html .content-formatted .edy-buy-button-container.vk-buy-box > .edy-buy-button-variants {
  margin-bottom: 22px !important;
}

/* ==========================================================================
   Shop cards: price and a quick "add to cart" button side by side, on every
   screen. No hover swap any more (it hid the price, and on phones it ate
   the first tap); the whole card still opens the product.
   ========================================================================== */
html .product_item-wrap:hover .product_item-price,
html .product_item-wrap .product_item-price {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* "Look closer" link (products with variants, sold out): the card itself
   opens the product */
html .product_item-wrap .product_item-btn.p-abs {
  display: none;
}

html .product_item-wrap .product_item-details--alignment .product_item-details {
  /* main.css hides overflow here, which cut the button's shadow and "+" */
  overflow: visible;
  display: flex;
  flex-direction: row;
  align-self: stretch;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

html .product_item-wrap .product_item-details .product_item-price {
  order: 1;
  margin-top: 0;
  min-width: 0;
}

html .product_item-wrap .product_item-btn.vk-quick-add {
  order: 2;
  position: relative;
  top: auto;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vk-forest);
  color: #fff;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(31, 42, 34, 0.8);
  transition: background-color 0.2s ease, transform 0.25s var(--vk-ease), box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

html .product_item-wrap .product_item-btn.vk-quick-add::after {
  content: none;
}

/* main.css's 3D settings (perspective, backface) are not needed here */
html .product_item-wrap .product_item-btn.vk-quick-add,
html .product_item-wrap .product_item-price {
  -webkit-perspective: none;
  perspective: none;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

html .product_item-wrap .product_item-btn.vk-quick-add:hover {
  background: var(--vk-ink);
  transform: scale(1.06);
}

html .product_item-wrap .product_item-btn.vk-quick-add:active {
  transform: scale(0.94);
}

html .product_item-wrap .product_item-btn.vk-quick-add:focus-visible {
  outline: 2px solid var(--vk-forest);
  outline-offset: 3px;
}

.vk-quick-add svg {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.35s var(--vk-ease);
}

.vk-quick-add__done {
  opacity: 0;
  transform: scale(0.5);
}

/* the small "+" on the cart */
.vk-quick-add__plus {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--vk-paper);
  border-radius: 50%;
  background: var(--vk-lemon);
  font-family: var(--vk-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--vk-forest);
  transition: transform 0.3s var(--vk-ease), opacity 0.2s ease;
}

/* added: a tick for a moment */
.vk-quick-add.is-added .vk-quick-add__cart { opacity: 0; transform: scale(0.5); }
.vk-quick-add.is-added .vk-quick-add__done { opacity: 1; transform: none; }
.vk-quick-add.is-added .vk-quick-add__plus { opacity: 0; transform: scale(0.4); }

.vk-quick-add.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

@media screen and (max-width: 480px) {
  html .product_item-wrap .product_item-btn.vk-quick-add {
    width: 42px;
    height: 42px;
  }

  html .product_item-wrap .product_item-details {
    gap: 6px;
  }
}

/* ==========================================================================
   Product variants (amount, flavour ...): between the price and the button,
   each choice a label above a rounded field, like the shop's sort menu.
   (main.css drew lines above and below and squeezed label and select into
   one row.)
   ========================================================================== */
html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-variants):not(:has(.edy-buy-button)), .edy-buy-button-variants),
html .content-formatted .edy-buy-button-variants {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

html .content-formatted .edy-buy-button-variants .form_field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html .content-formatted .edy-buy-button-variants .form_field .form_field_label {
  margin: 0 !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

html .content-formatted .edy-buy-button-variants .form_field .form_field_select,
html .content-formatted .edy-buy-button-variants select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 52px 0 20px;
  border: 1px solid rgba(31, 42, 34, 0.16);
  border-radius: 999px;
  background: var(--vk-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231f2a22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") right 22px center / 12px 8px no-repeat;
  box-shadow: 0 1px 2px rgba(31, 42, 34, 0.04);
  font-family: var(--vk-font-body);
  /* 16px: iPhones zoom into smaller form fields */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--vk-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html .content-formatted .edy-buy-button-variants select:hover {
  border-color: rgba(31, 42, 34, 0.32);
}

html .content-formatted .edy-buy-button-variants select:focus {
  outline: 0;
  border-color: var(--vk-forest);
  box-shadow: 0 0 0 4px rgba(31, 58, 43, 0.1);
}

@media screen and (max-width: 900px) {
  html .content-formatted .edy-buy-button-variants .form_field {
    max-width: none;
  }
}



/* ==========================================================================
   Buy box (vinkymon-theme.js marks the box Voog draws its buy button in):
   price, then the variant choice, then the button, by CSS order only, so
   Voog's widget keeps working (its elements are never moved). Anything
   else in the box (e.g. a deposit note) comes after.
   ========================================================================== */
html .content-formatted .vk-buy-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* (vinkymon-theme.js also labels the parts with plain classes; the order
   by those works without :has) */
html .content-formatted .vk-buy-box > .vk-buy-before { order: 0; }
html .content-formatted .vk-buy-box > .vk-price-block { order: 1 !important; }
html .content-formatted .vk-buy-box > .vk-variants-block { order: 2 !important; }
html .content-formatted .vk-buy-box > .vk-buy-btn-block { order: 3 !important; }
html .content-formatted .vk-buy-box > .vk-buy-after { order: 4 !important; }

html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-price):not(:has(.edy-buy-button)), .edy-buy-button-price) {
  order: 1;
}

html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button-variants):not(:has(.edy-buy-button)), .edy-buy-button-variants) {
  order: 2;
}

html :is(.content-formatted .vk-buy-box, .content-formatted.vk-buy-loose) > :is(:has(.edy-buy-button), .edy-buy-button) {
  order: 3;
}

/* The same styles by the plain classes (see "Buy box") */
html .content-formatted .vk-price-block {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 40px 0 22px !important;
  padding: 0;
  border: 0;
  line-height: 1.2;
}

html .content-formatted .vk-price-block .edy-buy-button-price {
  font-size: 34px !important;
  letter-spacing: -0.015em;
}

html .content-formatted .vk-price-block::after {
  content: 'Hind sisaldab käibemaksu';
  flex-basis: 100%;
  font-family: var(--vk-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

html[lang="en"] .content-formatted .vk-price-block::after { content: 'Price includes VAT'; }
html[lang="ru"] .content-formatted .vk-price-block::after { content: 'Цена с НДС'; }
html[lang="de"] .content-formatted .vk-price-block::after { content: 'Preis inkl. MwSt.'; }

html .content-formatted .vk-variants-block {
  margin: 0 0 22px !important;
}

html .content-formatted .vk-buy-btn-block {
  margin-bottom: 40px !important;
}

/* a button block inside another one (choice and button in one box) */
html .content-formatted .vk-buy-btn-block .vk-buy-btn-block {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Voog's buy button, as Voog really draws it:
     .edy-buy-button-container
       .edy-buy-button-variants   (the choice, when the product has variants)
       .form_field
         .edy-buy-button          ("Lisa ostukorvi")
         .edy-buy-button-price-container
   The .form_field box is made layout-transparent (display: contents), so
   the price, the choice and the button line up in one column and are
   ordered price, choice, button by CSS alone. Nothing is moved, so Voog's
   widget keeps working when it redraws.
   ========================================================================== */
html body .content-formatted .edy-buy-button-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 40px 0 40px !important;
}

html body .content-formatted .edy-buy-button-container > .form_field {
  display: contents !important;
}

/* 1. price */
html body .content-formatted .edy-buy-button-container .edy-buy-button-price-container {
  order: 1;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 22px !important;
  padding: 0 !important;
  line-height: 1.2;
}

html body .content-formatted .edy-buy-button-container .edy-buy-button-price-container .edy-buy-button-price {
  font-size: 34px !important;
  letter-spacing: -0.015em;
}

html body .content-formatted .edy-buy-button-container .edy-buy-button-price-container::after {
  content: 'Hind sisaldab käibemaksu';
  flex-basis: 100%;
  font-family: var(--vk-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

html[lang="en"] body .content-formatted .edy-buy-button-container .edy-buy-button-price-container::after { content: 'Price includes VAT'; }
html[lang="ru"] body .content-formatted .edy-buy-button-container .edy-buy-button-price-container::after { content: 'Цена с НДС'; }
html[lang="de"] body .content-formatted .edy-buy-button-container .edy-buy-button-price-container::after { content: 'Preis inkl. MwSt.'; }

/* 2. the choice */
html body .content-formatted .edy-buy-button-container > .edy-buy-button-variants {
  order: 2;
  margin: 0 0 22px !important;
}

/* 3. the button */
html body .content-formatted .edy-buy-button-container .edy-buy-button {
  order: 3;
  margin: 0 !important;
}

/* Voog's variant select starts at "---": make it read as a prompt */
html body .content-formatted .edy-buy-button-variants select:invalid,
html body .content-formatted .edy-buy-button-variants select option[value=""] {
  color: var(--vk-muted);
}

/* Voog's content puts a line break before the buy button: together with
   it, still about 40px */
html body .content-formatted br + .edy-buy-button-container {
  margin-top: 12px !important;
}

/* Card prices stay on one line; "from" before the lowest of several prices */
html .product_item-wrap .product_item-price,
html .product_item-wrap .product_item-price > * {
  white-space: nowrap;
}

html .product_item-wrap .product_item-price .flex_box {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.vk-price-from {
  font-family: var(--vk-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vk-muted);
}

@media screen and (max-width: 480px) {
  .vk-price-from {
    font-size: 10.5px;
  }
}

@media screen and (max-width: 640px) {
  html .product_item-wrap .product_item-price .flex_box:has(.vk-price-from) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.1;
  }

  html .product_item-wrap .product_item-price:has(.vk-price-from) {
    border-radius: 14px;
    padding: 5px 11px 6px;
  }

}

@media screen and (max-width: 380px) {
  html .product_item-wrap .product_item-price {
    font-size: 16px;
  }
}

/* the price gives way, never the button */
html .product_item-wrap .product_item-details .product_item-price {
  flex: 0 1 auto;
  min-width: 0;
}

/* the price row never wider than the card; on very narrow cards the
   button moves under the price (right-aligned) instead of out of the card */
html .product_item-wrap .product_item-details--alignment .product_item-details {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 8px;
}

html .product_item-wrap .product_item-details .vk-quick-add {
  margin-left: auto !important;
}

/* ==========================================================================
   Shop cards, bottom (final): the full price (a range may take two lines),
   then the add-to-cart button centred under it, with icon and text. The
   same information on every screen; nothing is shortened.
   ========================================================================== */
html .product_item-wrap .product_item-details--alignment .product_item-details {
  flex-direction: column !important;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

html .product_item-wrap .product_item-details .product_item-price {
  order: 1;
  align-self: center;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

html .product_item-wrap .product_item-price,
html .product_item-wrap .product_item-price > * {
  white-space: normal;
}

html .product_item-wrap .product_item-price .flex_box {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0;
}

/* each price stays whole; a range breaks after the dash */
.vk-price-part {
  white-space: nowrap;
}

/* a range on two lines: a rounded box instead of a full pill */
html .product_item-wrap .product_item-price:has(.vk-price-part) {
  border-radius: 16px;
}

html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--vk-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0.01em;
}

html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add:hover {
  transform: translateY(-1px);
}

/* the icon and the tick share one spot */
.vk-quick-add {
  position: relative;
}

.vk-quick-add .vk-quick-add__cart,
.vk-quick-add .vk-quick-add__done {
  flex: none;
}

.vk-quick-add .vk-quick-add__done {
  position: absolute;
  left: 18px;
}

.vk-quick-add__plus {
  display: none;
}

@media screen and (max-width: 480px) {
  html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }

  html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add .vk-quick-add__done {
    left: 12px;
  }
}

/* Small screens: the price full width, the button full width below it */
@media screen and (max-width: 640px) {
  html .product_item-wrap .product_item-details--alignment .product_item-details {
    align-items: stretch !important;
    gap: 10px;
  }

  html .product_item-wrap .product_item-details .product_item-price {
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    padding: 7px 8px 8px;
    border-radius: 14px;
  }

  html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add {
    box-sizing: border-box;
    width: 100%;
  }
}

/* both buttons (add / choose) exactly alike */
html .product_item-wrap .product_item-details a.product_item-btn.vk-quick-add,
html .product_item-wrap .product_item-details button.product_item-btn.vk-quick-add {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  line-height: 1.2;
  text-decoration: none;
}

/* the dash of a price range with room around it */
.vk-price-dash {
  padding: 0 0.3em;
}

/* name, price and button share one centre line */
html .product_item-wrap .product_item-details--alignment {
  text-align: center;
  align-items: center;
}

html .product_item-wrap .product_item-details--alignment .product_item-title {
  display: block;
  text-align: center;
}

/* narrowest phones: text only, on one line */
@media screen and (max-width: 380px) {
  html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add .vk-quick-add__cart {
    display: none;
  }

  html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add {
    padding: 8px 10px;
    font-size: 12.5px;
    white-space: nowrap;
  }
}

/* buttons line up along the bottom of the cards in a row */
html .product_item-wrap .product_item-details--wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

html .product_item-wrap .product_item-details--wrap > .flex_auto,
html .product_item-wrap .product_item-details--alignment {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

html .product_item-wrap .product_item-details--alignment .product_item-details {
  flex: 1 1 auto;
}

html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add {
  margin-top: auto !important;
}

/* Top menu pages that do not fit (vinkymon-theme.js) are under "…" */
html .header_fixed .menu_top-list > .menu-item.lvl-1.vk-nav-hidden {
  display: none !important;
}

/* price and button as one group at the bottom of the card: both line up
   in a row however many lines the name takes */
html .product_item-wrap .product_item-details--alignment .product_item-details {
  justify-content: flex-end;
}

html .product_item-wrap .product_item-details .product_item-price {
  margin-top: auto !important;
}

html .product_item-wrap .product_item-details .product_item-btn.vk-quick-add {
  margin-top: 0 !important;
}

/* a price box made taller (to match its row) keeps the price centred */
html .product_item-wrap .product_item-details .product_item-price {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}