/*
 * elenikomerc.com.mk, every page. The old site's look, modern: olive green, the ЕЛЕНИ logo, Open Sans, the
 * uppercase menu, the dark green footer. Board: https://claude.ai/artifact/STFXNnsh7mpBvJxW4Ja31G.
 * The file name changes with its content: CSS is cached 30 days.
 */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/OpenSans-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/OpenSans-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; }

:root { --ek-olive: #668033; --ek-olive-2: #59723b; --ek-deep: #131b04; --ek-ink: #22281a; --ek-text: #3b4230; --ek-lime: #aacc66; --ek-lime-2: #99cc00;
  --ek-head: #2b3a12; --ek-link: #4d6625; --ek-tint: #f6f8ef; --ek-line: #e3e8d6; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: "Open Sans", Arial, sans-serif; color: var(--ek-ink); background: #ffffff; font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--ek-link); }
a:hover { color: var(--ek-head); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ek-lime-2); outline-offset: 3px; }
h1, h2, h3 { color: var(--ek-head); line-height: 1.2; }
.ek-wrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.ek-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ek-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 14px; background: #ffffff; border-radius: 4px; }
.ek-skip:focus { left: 8px; }

/* header */
.ek-header { border-top: 6px solid var(--ek-olive); background: #ffffff; position: relative; z-index: 20; }
.ek-header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; }
.ek-logo img { display: block; height: 62px; width: auto; }
.ek-nav { display: flex; align-items: center; gap: 28px; }
.ek-nav ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.ek-nav ul a { display: inline-flex; align-items: center; min-height: 44px; color: #2b2f26; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.ek-nav ul a:hover, .ek-nav ul a.is-on { color: var(--ek-olive); }
.ek-nav ul a.is-on { box-shadow: inset 0 -3px 0 var(--ek-lime-2); }
.ek-langs { display: inline-flex; margin: 0; border: 1px solid #c9d3b1; border-radius: 16px; overflow: hidden; font-size: 12px; font-weight: 700; }
.ek-langs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; text-decoration: none; color: var(--ek-link); }
.ek-langs a.is-on { background: var(--ek-olive); color: #ffffff; }
.ek-menu-btn { display: none; width: 48px; height: 48px; border: 0; background: none; padding: 12px; cursor: pointer; }
.ek-menu-btn span[aria-hidden] { display: block; height: 2px; background: var(--ek-ink); box-shadow: 0 -8px 0 var(--ek-ink), 0 8px 0 var(--ek-ink); }

/* buttons */
.ek-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ek-btn, .ek-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 24px; font-weight: 700;
  text-decoration: none; font-size: 15px; font-family: inherit; cursor: pointer; }
.ek-btn { background: #ffffff; color: var(--ek-link); border: 0; }
.ek-btn:hover { background: #eef4dd; color: var(--ek-head); }
.ek-btn2 { border: 1px solid rgba(255, 255, 255, .7); color: #ffffff; font-weight: 600; }
.ek-btn2:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }
.ek-sec .ek-btn, .ek-form .ek-btn { background: var(--ek-olive); color: #ffffff; }
.ek-sec .ek-btn:hover, .ek-form .ek-btn:hover { background: var(--ek-olive-2); color: #ffffff; }

/* hero */
.ek-hero { position: relative; overflow: hidden; background: var(--ek-olive); color: #ffffff; }
.ek-hero-shape { position: absolute; inset: 0; background: var(--ek-olive-2); clip-path: polygon(58% 0, 100% 0, 100% 100%, 46% 100%); }
.ek-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 72px; }
.ek-hero--text .ek-hero-grid { grid-template-columns: minmax(0, 760px); padding-bottom: 56px; }
.ek-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ek-hero h1 { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.12; color: #ffffff; }
.ek-hero--page h1 { font-size: clamp(30px, 3.4vw, 40px); }
.ek-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #dcebb4; }
.ek-eyebrow--green { color: var(--ek-olive); }
.ek-lead { margin: 0; max-width: 540px; font-size: 18px; line-height: 1.6; color: #eef4dd; }
.ek-hero-pic img { display: block; width: 100%; height: 340px; object-fit: cover; border: 8px solid #ffffff; border-radius: 14px; box-shadow: 0 20px 44px rgba(0, 0, 0, .28); }

/* the old slider's four photos, cross-fading */
.ek-slider { position: relative; }
.ek-slides { position: relative; height: 400px; border: 8px solid #ffffff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 44px rgba(0, 0, 0, .28); background: #ffffff; }
.ek-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.ek-slide.is-on { opacity: 1; }
.ek-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ek-slider-bar { position: absolute; left: 0; right: 0; bottom: -40px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.ek-dots { display: flex; gap: 6px; }
.ek-dot { width: 34px; height: 24px; border: 0; padding: 10px 3px; background: none; cursor: pointer; }
.ek-dot::before { content: ""; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.ek-dot.is-on::before { background: #ffffff; }
.ek-pause { width: 32px; height: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ek-pause .i-play { display: none; }
.ek-slider.is-paused .ek-pause .i-play { display: block; }
.ek-slider.is-paused .ek-pause .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .ek-slide { transition: none; } }

/* facts */
.ek-facts { background: var(--ek-tint); padding: 52px 0; }
.ek-facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ek-facts li { border-top: 4px solid var(--ek-lime-2); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ek-facts strong { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--ek-link); }
.ek-facts span { font-size: 15px; line-height: 1.5; color: var(--ek-text); }

/* sections */
.ek-sec { padding: 72px 0; scroll-margin-top: 12px; }
.ek-sec--tint { background: var(--ek-tint); }
.ek-sec--top0 { padding-top: 0; }
.ek-sec h2 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 34px); }
.ek-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.ek-head h2 { margin: 8px 0 0; }
.ek-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.ek-more:hover { text-decoration: underline; }

.ek-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ek-cat { position: relative; display: block; min-height: 220px; border-radius: 10px; overflow: hidden; color: #ffffff; text-decoration: none; background: var(--ek-olive-2); }
.ek-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ek-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 27, 4, 0) 35%, rgba(19, 27, 4, .85) 100%); }
.ek-cat:hover img { transform: scale(1.04); }
.ek-cat-text { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.ek-cat-text strong { font-size: 20px; }
.ek-cat-text span { font-size: 13px; color: #dcebb4; white-space: nowrap; }

.ek-prods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.ek-prods--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ek-prod { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; border: 1px solid var(--ek-line); border-radius: 10px; background: #ffffff;
  text-align: center; text-decoration: none; color: var(--ek-ink); }
a.ek-prod:hover { box-shadow: 0 8px 22px rgba(43, 58, 18, .14); }
.ek-prod img { height: 180px; width: auto; object-fit: contain; }
.ek-prod strong { font-size: 15px; line-height: 1.35; }
.ek-prod-cat { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ek-olive); }
.ek-unit { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 13px; background: #eef4dd; color: var(--ek-link); font-size: 13px; font-weight: 700; }

.ek-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ek-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #ffffff; box-shadow: 0 2px 14px rgba(43, 58, 18, .08); }
.ek-card img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ek-card > div { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.ek-card h3 { margin: 0; font-size: 22px; }
.ek-card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ek-text); }

.ek-about { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.ek-about-pic { display: block; width: 100%; border: 6px solid #ffffff; border-radius: 12px; box-shadow: 0 10px 28px rgba(43, 58, 18, .18); }
.ek-about h2 { margin: 8px 0 14px; font-size: clamp(24px, 2.6vw, 30px); }
.ek-about p { margin: 0 0 8px; font-size: 16px; line-height: 1.7; color: var(--ek-text); }

.ek-band { background: var(--ek-olive-2); color: #ffffff; padding: 48px 0; }
.ek-band .ek-wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ek-band h2 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 28px); color: #ffffff; }
.ek-band p { margin: 0; color: #eef4dd; }

/* text pages */
.ek-text { max-width: 820px; }
.ek-text p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; color: var(--ek-text); }
.ek-text h2 { margin: 0 0 16px; }
.ek-legal h2 { margin: 36px 0 12px; font-size: 22px; }
.ek-legal ul { margin: 0 0 16px; padding-left: 22px; color: var(--ek-text); }
.ek-legal li { margin: 4px 0; }
.ek-toc { margin: 0 0 8px; padding: 18px 22px; border-radius: 8px; background: var(--ek-tint); }
.ek-toc p { margin: 0 0 6px; font-weight: 700; color: var(--ek-head); font-size: 16px; }
.ek-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.ek-toc li { margin: 0 0 4px; break-inside: avoid; }

/* products page */
.ek-jumps { position: sticky; top: 0; z-index: 10; background: #ffffff; border-bottom: 1px solid var(--ek-line); }
.ek-jumps .ek-wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: thin; }
.ek-jumps a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--ek-tint); color: var(--ek-link);
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.ek-jumps a:hover { background: #e6eecf; }
.ek-cat-sec { scroll-margin-top: 64px; }
.ek-cat-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.ek-cat-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; }
.ek-cat-head h2 { margin: 0; }
.ek-cat-head p { margin: 2px 0 0; color: var(--ek-text); }
.ek-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 40px; align-items: start; }
.ek-cal { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(43, 58, 18, .08); font-size: 15px; }
.ek-cal th, .ek-cal td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--ek-line); }
.ek-cal thead th { background: var(--ek-olive); color: #ffffff; font-size: 13px; letter-spacing: .5px; }
.ek-cal tbody th { font-weight: 600; color: var(--ek-head); }
.ek-cal tbody tr:last-child th, .ek-cal tbody tr:last-child td { border-bottom: 0; }

/* contact */
.ek-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; }
.ek-contact-info { display: flex; flex-direction: column; gap: 20px; }
.ek-box { padding: 24px; border-radius: 12px; background: var(--ek-tint); }
.ek-box h2 { margin: 0 0 12px; font-size: 20px; }
.ek-box p { margin: 0 0 10px; color: var(--ek-text); }
.ek-form-box { background: #ffffff; border: 1px solid var(--ek-line); box-shadow: 0 2px 14px rgba(43, 58, 18, .08); }
.ek-form { display: flex; flex-direction: column; gap: 16px; }
.ek-form label { display: flex; flex-direction: column; gap: 6px; }
.ek-form label span { font-size: 13px; font-weight: 600; color: var(--ek-text); }
.ek-form input, .ek-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #c9d3b1; border-radius: 8px; font: inherit; font-size: 16px; background: #ffffff; color: var(--ek-ink); }
.ek-form textarea { resize: vertical; min-height: 140px; }
.ek-form input:focus, .ek-form textarea:focus { border-color: var(--ek-olive); outline: none; box-shadow: 0 0 0 3px rgba(102, 128, 51, .18); }
.ek-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ek-form .ek-btn { align-self: flex-start; }
.ek-form-note { margin: 0; font-size: 13px; color: var(--ek-text); }

/* footer */
.ek-foot { background: var(--ek-deep); color: #c7d1b0; font-size: 14px; line-height: 1.65; }
.ek-foot .ek-wrap { padding-top: 48px; padding-bottom: 24px; }
.ek-foot-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ek-foot-h { margin: 0 0 10px; color: var(--ek-lime); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.ek-foot p { margin: 0 0 10px; }
.ek-foot strong { color: #ffffff; font-weight: 600; }
.ek-foot ul { margin: 0; padding: 0; list-style: none; }
.ek-foot a { color: #c7d1b0; text-decoration: none; display: inline-block; padding: 3px 0; }
.ek-foot a:hover { color: var(--ek-lime); }
.ek-foot-logo { display: block; width: 150px; height: auto; margin-top: 10px; opacity: .9; }
.ek-foot-bar { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* the form's status message from forms.js sits under the button */
.ek-form .site-form-status { margin-top: 4px; }

@media (max-width: 1000px) { .ek-prods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ek-menu-btn { display: block; }
  .ek-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 24px 20px;
    background: #ffffff; border-bottom: 1px solid var(--ek-line); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); }
  .ek-nav.is-open { display: flex; }
  .ek-nav ul { flex-direction: column; gap: 0; }
  .ek-nav ul a { width: 100%; border-bottom: 1px solid var(--ek-line); }
  .ek-nav ul a.is-on { box-shadow: inset 3px 0 0 var(--ek-lime-2); padding-left: 10px; }
  .ek-langs { align-self: flex-start; }
  .ek-hero-grid, .ek-two, .ek-about, .ek-contact, .ek-cal-wrap { grid-template-columns: minmax(0, 1fr); }
  .ek-hero-shape { clip-path: polygon(78% 0, 100% 0, 100% 100%, 70% 100%); }
  .ek-facts ul, .ek-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-prods, .ek-prods--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ek-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-sec { padding: 56px 0; }
  .ek-about-pic { max-width: 300px; }
}
@media (max-width: 560px) {
  .ek-wrap { padding: 0 16px; }
  .ek-logo img { height: 50px; }
  .ek-hero-shape { display: none; }
  .ek-slides { height: 260px; }
  .ek-hero-pic img { height: 220px; }
  .ek-cats { grid-template-columns: minmax(0, 1fr); }
  .ek-prods, .ek-prods--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ek-prod img { height: 140px; }
  .ek-foot-cols, .ek-form-row { grid-template-columns: minmax(0, 1fr); }
  .ek-ctas { width: 100%; flex-direction: column; }
  .ek-ctas a { width: 100%; }
  .ek-toc ol { columns: 1; }
  .ek-cat-thumb { width: 88px; height: 60px; }
}