/* ==========================================================
   МАЈА МЕД · НОЌНА БЕРБА
   Една посветеност: злато како светло во темнина.
   Намерно само една тема — ова е свет, не прекинувач.
   ========================================================== */

/* фонтови од самата страница (порано од Google Fonts) */
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pt-sans-400i-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pt-sans-400i-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: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pt-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/pt-sans-400-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: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/pt-sans-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/pt-sans-700-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: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/yeseva-one-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/yeseva-one-400-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 {
  /* Yeseva One и PT Sans — и двата се цртани со кирилица како прв писмо */
  --display: "Yeseva One", "Playfair Display", Georgia, serif;
  --body: "PT Sans", "Segoe UI", Tahoma, Arial, sans-serif;

  --void: #0A0704;
  --pitch: #140D06;
  --soot: #1E140A;
  --glass: rgba(255, 214, 138, .045);
  --glass-line: rgba(245, 200, 66, .16);

  --gold: #F5C842;
  --amber: #FFA51F;
  --deep: #A96A06;
  --cream: #FFF4DE;
  --ink: #F3E6CB;
  --muted: #AC8E62;

  /* ── Од етикетата на теглата (MA-JA 2026) ──────────────
     Орев за површините, злато на саќето за линиите.
     Кремастата и златната веќе се совпаѓаат со етикетата. */
  --walnut: #2A1C14;         /* површини — сите текстови остануваат над AA */
  --walnut-hi: #31221A;      /* поистакната површина */
  --comb: #E3B841;           /* златото од саќето */
  --comb-line: rgba(227, 184, 65, .20);

  --glow: 0 14px 30px -14px rgba(0, 0, 0, .75);
  --measure: 66ch;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

.wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: 26.8px; position: relative; z-index: 2; }
.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
  display: flex; align-items: center; gap: 13px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* ── амбиент: зрнце, прашина, светло што следи ──────────── */
#pollen {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

.grain {
  position: fixed; inset: -30%; z-index: 3; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grainshift 700ms steps(1) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

/* светло што го следи покажувачот — како фенер над кошница */
.spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
              rgba(255, 165, 31, .13), transparent 70%);
  transition: opacity .4s;
}

/* ── лента за напредок: тегла што се полни ──────────────── */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 90;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--deep), var(--gold), var(--amber));
}

/* ── прелоадер ──────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 200; background: var(--void);
  display: grid; place-items: center; gap: 26.8px;
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader svg { width: 92px; height: 106px; }
.preloader .cell { fill: none; stroke: var(--gold); stroke-width: 2; opacity: .22; }
.preloader .cell.lit { animation: litcell 1.5s var(--ease) infinite; }
.preloader .cell.lit:nth-of-type(2) { animation-delay: .16s; }
.preloader .cell.lit:nth-of-type(3) { animation-delay: .32s; }
@keyframes litcell {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}
.preloader p { font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }

/* ── навигација ─────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 70;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.stuck {
  background: rgba(10, 7, 4, .72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--glass-line);
}
.nav .wrap { display: flex; align-items: center; gap: 26.8px; min-height: 82px; }

.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; min-height: 44px; }
.brand .mark {
  width: 30px; height: 34px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--gold), var(--deep));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.brand b { font-family: var(--display); font-size: 26.8px; display: block; letter-spacing: .01em; }
.brand span { font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); display: block; }

.menu { display: flex; gap: 26.8px; font-size: 16.5px; }
.menu a { color: var(--muted); position: relative; padding-block: 6.3px; transition: color .3s; }
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.menu a:hover { color: var(--cream); }
.menu a:hover::after { transform: scaleX(1); }

.cart {
  display: inline-flex; align-items: center; gap: 10.2px; cursor: pointer;
  font-family: var(--body); font-size: 13px; color: var(--cream);
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 10.2px 16.5px;
  backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s;
}
.cart:hover { border-color: var(--gold); box-shadow: var(--glow); }
.cart .n {
  display: grid; place-items: center; min-width: 23px; height: 23px; padding-inline: 6.3px;
  border-radius: 999px; background: linear-gradient(140deg, var(--gold), var(--amber));
  color: #17100A; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.cart .v { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── херој ──────────────────────────────────────────────── */
.hero { position: relative; padding-block: 89.1px 70px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 55.1px; align-items: center; }

.title {
  font-size: clamp(38px, 6vw, 82px);
  letter-spacing: -.015em;
  margin-block: 21px 26.8px;
}
.title .line { display: block; overflow: hidden; }
.title .line > span {
  display: block;
  transform: translateY(110%);
  animation: riseline 1.1s var(--ease) forwards;
}
.title .line:nth-child(2) > span { animation-delay: .12s; }
.title .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes riseline { to { transform: translateY(0); } }

/* злато во буквите: полна боја, како на етикетата, не градиент */
.molten { color: var(--gold); }

.lede { font-size: 21px; color: var(--muted); max-width: 46ch; }

.trust { list-style: none; padding: 0; margin-top: 26.8px; display: flex; flex-direction: column; gap: 10.2px; font-size: 16.5px; }
.trust li { display: flex; align-items: baseline; gap: 10.2px; color: var(--ink); }
.trust li::before { content: "◆"; color: var(--gold); font-size: 10.2px; flex-shrink: 0; }

.cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.btn {
  position: relative; overflow: hidden;
  font-family: var(--body); font-size: 16.5px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; padding: 16.5px 34px; cursor: pointer; border: 1px solid transparent;
  display: inline-block; transition: transform .3s var(--ease), box-shadow .3s;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: #150E06; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn-gold:hover::after { animation: sheen .9s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .85); }

.btn-wire { border-color: var(--glass-line); color: var(--cream); background: var(--glass); backdrop-filter: blur(8px); }
.btn-wire:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--glow); }

/* теглата во херојот */
.herojar { position: relative; display: grid; place-items: center; }
.herojar::before {
  content: ""; position: absolute; width: 116%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 31, .30) 0%, transparent 66%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.14); opacity: .78; } }
/* Фотографијата е висока (900×1735). Ја сечеме во рамка наместо да ја
   згмечиме: 4:5 до текстот, 4:3 кога херојот е во една колона. */
.herojar img {
  position: relative; border-radius: 14px;
  width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 62%;
  border: 1px solid var(--glass-line);
  box-shadow: 0 50px 90px -40px #000;
}

.scrollcue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scrollcue i { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 60%, 100% { transform: scaleY(1); transform-origin: top; } }

/* Местото под воведот: обичен ред, не мала ознака над насловот. */
.mesto { color: var(--muted); font-size: 16.5px; margin-top: 13px; }

/* ── секции ─────────────────────────────────────────────── */
.band { padding-block: 113.3px; position: relative; z-index: 2; }
.band.tight { padding-block: 89.1px; }

.hexrule { display: flex; align-items: center; gap: 16.5px; justify-content: center; margin-bottom: 55.1px; }
.hexrule i {
  width: 13px; height: 15px; background: var(--gold); opacity: .5;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexrule::before, .hexrule::after {
  content: ""; height: 1px; flex: 1; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--glass-line));
}
.hexrule::after { background: linear-gradient(90deg, var(--glass-line), transparent); }

.head { margin-bottom: 55.1px; }
.head h2 { font-size: clamp(34px, 5.2vw, 70px); margin-block: 16.5px 16.5px; }
.head p { color: var(--muted); max-width: var(--measure); font-size: 16.5px; }
.head.mid { text-align: center; }
.head.mid .eyebrow { justify-content: center; }
.head.mid p { margin-inline: auto; }

/* ── производи: стакло + 3D навалување ─────────────────── */
/* auto-FILL прави празни колони кога има малку производи, па
   картичките остануваат залепени лево со дупка десно.
   auto-FIT + ограничена ширина + центрирање држи рамнотежа
   без разлика дали има 2, 3 или 5 производи. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 26.8px;
}

.card {
  position: relative; padding: 26.8px 26.8px 26.8px; border-radius: 14px;
  background: var(--walnut); border: 1px solid var(--comb-line);
  display: flex; flex-direction: column;
  transform-style: preserve-3d;
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--cx, 50%) var(--cy, 0%), rgba(245, 200, 66, .16), transparent 62%);
  opacity: 0; transition: opacity .4s;
}
.card:hover { border-color: rgba(245, 200, 66, .5); box-shadow: 0 34px 70px -34px #000; }
.card:hover::before { opacity: 1; }

.card figure {
  margin: 0 0 16.5px; height: 300px; display: grid; place-items: center; position: relative;
  transform: translateZ(40px);
}
.card figure::before {
  content: ""; position: absolute; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 165, 31, .34), transparent 68%);
}
.card figure svg { height: 100%; width: auto; position: relative; filter: drop-shadow(0 20px 26px rgba(0,0,0,.6)); }
.card figure .cardphoto { height: 100%; max-height: 300px; width: auto; max-width: 100%; object-fit: contain; position: relative; border-radius: 10px; box-shadow: 0 12px 24px -16px rgba(42, 28, 20, .5); }

.byline { font-size: 13px; color: var(--gold); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; }
.byline i {
  width: 15px; height: 17px; background: var(--gold); flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.card h3 { font-size: 26.8px; }
.card .note { font-size: 16.5px; color: var(--muted); margin-block: 10.2px 21px; min-height: 3.2em; }

.pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 13px; margin-top: auto; padding-top: 16.5px; border-top: 1px solid var(--glass-line); }
.price { font-family: var(--display); font-size: 26.8px; }
.price small { font-family: var(--body); font-size: 13px; color: var(--muted); }
.wt { font-size: 13px; color: var(--muted); letter-spacing: .06em; }

.add {
  width: 100%; margin-top: 16.5px; padding: 13px; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .05em;
  background: transparent; color: var(--cream);
  border: 1px solid var(--glass-line); border-radius: 999px;
  transition: background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.add:hover {
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: #150E06; border-color: transparent;
}

.tag {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 6.3px 13px; border-radius: 999px;
  background: rgba(245, 200, 66, .14); color: var(--gold);
  border: 1px solid rgba(245, 200, 66, .38);
}

/* ── галерија ───────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16.5px; }
.gallery figure {
  margin: 0; position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--glass-line); aspect-ratio: 3 / 4;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.78); transition: transform .8s var(--ease), filter .6s; }
.gallery figure:hover img { transform: scale(1.09); filter: saturate(1.05) brightness(1); }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 16.5px 16.5px;
  font-size: 13px; font-weight: 700; color: var(--cream);
  background: linear-gradient(to top, rgba(8,5,2,.9), transparent);
}

/* ── бројки ─────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26.8px; }
.metric {
  padding: 34px 26.8px; border-radius: 14px; text-align: center;
  background: var(--walnut); border: 1px solid var(--comb-line);
}
.metric b { font-family: var(--display); font-size: 55.1px; display: block; line-height: 1; }
.metric span { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 13px; }
@media (max-width: 560px) {
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric { padding: 18px 10px; }
  .metric b { font-size: 36px; }
  .metric span { font-size: 13px; letter-spacing: .06em; margin-top: 8px; }
}

/* ── завршен повик ──────────────────────────────────────── */
.closer { position: relative; padding-block: 113.3px; text-align: center; overflow: hidden; }
.closer::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 900px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,165,31,.16), transparent 62%);
}
.closer h2 { font-size: clamp(34px, 7vw, 89.1px); }
.closer p { color: var(--muted); max-width: 52ch; margin: 22px auto 0; }

/* ── подножје ───────────────────────────────────────────── */
.foot { border-top: 1px solid var(--glass-line); background: var(--pitch); padding-block: 70px 34px; position: relative; z-index: 2; }
.footgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px; }
.footgrid > :first-child { grid-column: 1 / -1; }
@media (max-width: 1200px) { .footgrid { grid-template-columns: repeat(4, 1fr); } .footgrid > :first-child { grid-column: 1 / -1; } }
.foot h3 { font-family: var(--body); line-height: 1.6; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 16.5px; font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3.1px; font-size: 16.5px; }
/* Целите за прст мора да се барем 44px високи — ова се линкови
   за движење низ страницата, не текст во реченица. */
.foot ul a { display: inline-flex; align-items: center; min-height: 44px; }
.foot a:hover { color: var(--gold); }
.foot .blurb { color: var(--muted); font-size: 16.5px; max-width: 36ch; margin-top: 13px; }
.colophon { margin-top: 43.3px; padding-top: 21px; border-top: 1px solid var(--glass-line); display: flex; flex-wrap: wrap; gap: 13px 26.8px; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* ── известување ────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 26px);
  background: linear-gradient(135deg, var(--gold), var(--amber)); color: #150E06;
  font-weight: 700; font-size: 13px; padding: 16.5px 26.8px; border-radius: 999px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); z-index: 120;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* На телефон Вибер/WhatsApp копчето долу десно би го покрило
   известувањето. Известувањето оди над него. */
@media (max-width: 620px) {
  .toast { bottom: 96px; width: max-content; max-width: calc(100% - 32px); text-align: center; }
}

/* ── појавување при скрол ───────────────────────────────── */
.rise { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rise.in { opacity: 1; transform: none; }
.rise[data-d="1"] { transition-delay: .09s; }
.rise[data-d="2"] { transition-delay: .18s; }
.rise[data-d="3"] { transition-delay: .27s; }
.rise[data-d="4"] { transition-delay: .36s; }
.rise[data-d="5"] { transition-delay: .45s; }

/* ══════════════════════════════════════════════════════════
   ВТОР СЛОЈ · занает наместо бучава
   ══════════════════════════════════════════════════════════ */

/* послоевита сенка — една сенка изгледа лепено, три изгледаат вистински */
:root {
  --lift:
    0 1px 2px rgba(0, 0, 0, .5),
    0 6px 12px rgba(0, 0, 0, .38),
    0 22px 44px rgba(0, 0, 0, .34),
    0 48px 90px -30px rgba(0, 0, 0, .6);
}

/* ── сопствен покажувач ─────────────────────────────────── */
/* „hover: hover" е вистинската проверка за глушец —
   само „pointer: fine" пропушта телефони и таблети. */
@media (hover: hover) and (pointer: fine) {
  .cur, .cur-ring { position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; border-radius: 50%; }
  .cur {
    width: 6px; height: 6px; background: var(--gold);
    transform: translate(-50%, -50%);
  }
  /* Позицијата оди во својството `translate`, НЕ во `transform`.
     Прелистувачот ги применува по ред translate → scale → transform,
     па `scale: 1.63` на .hot ја множеше и позицијата од transform:
     над врска прстенот скокаше на 1.63× координатите, долу десно
     (кон WhatsApp копчето), додека точката стоеше на врската.
     Центрирањето е со margin, за да не зависи од ниту еден transform. */
  .cur-ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1px solid rgba(245, 200, 66, .45);
    transition: translate .14s cubic-bezier(.2, .7, .3, 1), scale .32s var(--ease), border-color .32s, background .32s, opacity .3s;
  }
  .cur-ring.hot {
    scale: 1.63;
    border-color: var(--gold); background: rgba(245, 200, 66, .1);
  }
  body.hascursor { cursor: none; }
  body.hascursor a, body.hascursor button { cursor: none; }
}

/* ── страничен индекс на секции ─────────────────────────── */
.sideindex {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 65; display: flex; flex-direction: column; gap: 16.5px;
}
.sideindex a { display: flex; align-items: center; gap: 10.2px; justify-content: flex-end; }
.sideindex .lbl {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateX(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .35s;
}
.sideindex .dot {
  width: 7px; height: 8px; background: var(--muted); opacity: .5;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background .35s, opacity .35s, transform .35s var(--ease);
}
.sideindex a:hover .lbl, .sideindex a.on .lbl { opacity: 1; transform: none; }
.sideindex a:hover .dot, .sideindex a.on .dot { background: var(--gold); opacity: 1; transform: scale(1.5); }
.sideindex a.on .lbl { color: var(--gold); }

@media (max-width: 1200px) { .sideindex { display: none; } }

/* ── откривање збор по збор ─────────────────────────────── */
.wsplit .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wsplit .w > span {
  display: inline-block; transform: translateY(105%);
  transition: transform .95s var(--ease);
}
.wsplit.in .w > span { transform: none; }

/* ── откривање на слика со маска ────────────────────────── */
/* Сликата се „одвиткува“, не figure: IntersectionObserver не гледа елемент
   што е целосно исечен, па порано галеријата никогаш не се појавуваше. */
.mask img { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease); }
.mask.in img { clip-path: inset(0 0 0 0); }

/* ── дуотон: сите фотографии во иста палета, боја се враќа на допир ── */
.gallery figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, #6E4304, var(--gold));
  mix-blend-mode: color; opacity: .62; transition: opacity .7s var(--ease);
}
.gallery figure:hover::after { opacity: 0; }
.gallery img { filter: grayscale(.9) contrast(1.08) brightness(.72); }
.gallery figure:hover img { filter: grayscale(0) contrast(1) brightness(1); }
.gallery figcaption { z-index: 2; }

/* ── фиока за кошничка ──────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 130; background: rgba(6, 4, 2, .72);
  backdrop-filter: blur(6px); opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
.scrim.on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 140;
  background: linear-gradient(180deg, var(--soot), var(--pitch));
  border-left: 1px solid var(--glass-line);
  box-shadow: var(--lift);
  transform: translateX(102%); transition: transform .55s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.on { transform: none; }
.drawer header {
  display: flex; align-items: center; justify-content: space-between; gap: 13px;
  padding: 26.8px 26.8px; border-bottom: 1px solid var(--glass-line);
}
.drawer header h3 { font-size: 21px; }
.xbtn {
  background: none; border: 1px solid var(--glass-line); border-radius: 50%;
  width: 44px; height: 44px; color: var(--cream); font-size: 16.5px; cursor: pointer;
  transition: border-color .3s, transform .3s var(--ease);
}
.xbtn:hover { border-color: var(--gold); transform: rotate(90deg); }

.dbody { flex: 1; overflow-y: auto; padding: 8px 26.8px; }
.dline { display: grid; grid-template-columns: 1fr auto; gap: 8px 16.5px; padding: 21px 0; border-bottom: 1px solid var(--glass-line); }
.dline h4 { margin: 0; font-family: var(--body); font-size: 16.5px; font-weight: 700; }
.dline .v { font-size: 13px; color: var(--gold); }
.dline .amt { font-family: var(--display); font-size: 21px; white-space: nowrap; }
/* Кога елементот е ќерка на grid, "inline-flex" не го спречува
   растегнувањето — се гледаше рамка од 277px со контроли од
   76px збиени лево. Треба ширина по содржина. */
.qty {
  display: inline-flex; align-items: center; gap: 3.9px;
  width: max-content; justify-self: start;
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 3.1px;
}
.qty button {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--cream); font-size: 16.5px; line-height: 1;
  transition: background .25s, color .25s;
}
.qty button:hover { background: var(--gold); color: #150E06; }
.qty span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }

.empty { padding: 55.1px 0; text-align: center; color: var(--muted); }

.dfoot { padding: 21px 26.8px 26.8px; border-top: 1px solid var(--glass-line); background: rgba(0,0,0,.24); }
.drow { display: flex; justify-content: space-between; gap: 13px; font-size: 16.5px; color: var(--muted); margin-bottom: 10.2px; }
.drow.total { color: var(--cream); font-size: 16.5px; margin-block: 16.5px 21px; }
.drow.total b { font-family: var(--display); font-size: 26.8px; color: var(--gold); }
.dnote { font-size: 13px; color: var(--muted); margin-top: 13px; text-align: center; }

@media (max-width: 700px) {
  .modal .sheet { grid-template-columns: 1fr; }
  .modal .shot { border-right: none; border-bottom: 1px solid var(--glass-line); }
}

/* ── магнетни копчиња ───────────────────────────────────── */
.mag { will-change: transform; }

/* ── подобрено стакло ───────────────────────────────────── */
.card, .metric, .calc, .panelcard, .listing { box-shadow: var(--lift); }
.card::after, .metric::after, .panelcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 240, 200, .10), transparent 42%);
}
.metric, .panelcard, .calc { position: relative; }

/* ══════════════════════════════════════════════════════════
   ЛАБОРАТОРИСКА АНАЛИЗА — срцето на страницата
   ══════════════════════════════════════════════════════════ */
:root {
  --good: #4FBF8B;        /* светло зелена на темна подлога — AA ✓ */
  --good-deep: var(--good-deep);   /* потемна, за градиент */
  --viber: #665CAC;       /* Вибер — бел текст 5.69 ✓, спрема позадината 3.53 ✓ */
}

.labgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 21px; }

.labrow {
  padding: 26.8px 26.8px 21px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(12px); box-shadow: var(--lift); position: relative;
}
.labtop { display: flex; align-items: baseline; justify-content: space-between; gap: 16.5px; }
.labtop h3 { font-family: var(--body); font-size: 16.5px; font-weight: 700; letter-spacing: .02em; }
.labval b { font-family: var(--display); font-size: 34px; color: var(--gold); line-height: 1; }
.labval small { font-size: 13px; color: var(--muted); }

.labwhat { font-size: 13px; color: var(--muted); margin-block: 13px 21px; }

.labtrack {
  position: relative; height: 9px; border-radius: 999px;
  background: rgba(255, 240, 200, .09); overflow: visible;
}
.labfill {
  display: block; height: 100%; border-radius: 999px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #2E8F68, var(--good));
  transition: transform 1.1s var(--ease);
}
.lablimit {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--gold); border-radius: 2px; transform: translateX(-1px);
}

.labfoot { display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap; margin-top: 16.5px; }
.labfoot .ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--good); }
.labfoot .ok i { font-style: normal; font-size: 10.2px; }
.labrule { font-size: 13px; color: var(--muted); }

@media (max-width: 700px) { .cert { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ══════════════════════════════════════════════════════════
   ФОРМА ЗА НАРАЧКА
   ══════════════════════════════════════════════════════════ */
.ordergrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 43.3px; align-items: start; }

.form {
  padding: 34px; border-radius: 16px;
  background: var(--walnut); border: 1px solid var(--comb-line);
  box-shadow: var(--lift);
}
.fg { margin-bottom: 16.5px; }
.fg label { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.fg input, .fg textarea {
  width: 100%; padding: 13px 16.5px; border-radius: 10px;
  background: rgba(0, 0, 0, .3); color: var(--cream);
  border: 1px solid var(--glass-line);
  font-family: var(--body); font-size: 16.5px;
  transition: border-color .3s, box-shadow .3s;
}
.fg input:focus, .fg textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 200, 66, .16);
}
.fg textarea { resize: vertical; min-height: 84px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16.5px; }

.paynote {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16.5px 21px; border-radius: 12px; margin-bottom: 21px;
  background: rgba(79, 191, 139, .09); border: 1px solid rgba(79, 191, 139, .3);
}
.paynote b { color: var(--good); display: block; margin-bottom: 3.1px; font-size: 16.5px; }
.paynote p { font-size: 13px; color: var(--muted); }

.steps { display: flex; flex-direction: column; gap: 26.8px; }
.stepx { display: grid; grid-template-columns: auto 1fr; gap: 16.5px; align-items: start; }
.stepx .n {
  width: 40px; height: 45px; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(245,200,66,.18), transparent);
  border: 1px solid var(--glass-line);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-family: var(--display); font-size: 16.5px; color: var(--gold);
}
.stepx h3 { font-family: var(--body); line-height: 1.6; font-size: 16.5px; font-weight: 700; margin-bottom: 5px; }
.stepx p { font-size: 16.5px; color: var(--muted); }

@media (max-width: 900px) { .ordergrid { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 520px) { .frow { grid-template-columns: 1fr; } .form { padding: 26.8px; } }

.nudge { font-size: 13px; color: var(--gold); padding: 16.5px 0 0; text-align: center; }

/* ── плуткачко копче за порака ──────────────────────────── */
.wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 100;
  display: inline-flex; align-items: center; gap: 10.2px;
  padding: 13px 21px; border-radius: 999px;
  background: var(--viber); color: #FFF;
  font-family: var(--body); font-size: 13px; font-weight: 700;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .7);
  transition: transform .25s var(--ease), filter .25s, opacity .25s, visibility .25s;
}
.wa:hover { transform: translateY(-3px); filter: brightness(1.08); }

/* Кога подножјето е на екран, копчето се тргнува — инаку трајно
   го покрива редот со авторските права. Се враќа само штом
   посетителот ќе се врати нагоре. */
.wa.away { opacity: 0; visibility: hidden; transform: translateY(21px) scale(.9); pointer-events: none; }
.wa svg { flex-shrink: 0; }

@media (max-width: 620px) {
  .wa { padding: 13px; right: 16px; bottom: 16px; }
  .wa span { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ИНФО СТРАНИЦИ · достава, рекламации, приватност
   ══════════════════════════════════════════════════════════ */
.pagehero { padding-block: 70px 43.3px; border-bottom: 1px solid var(--glass-line); }
.pagehero h1 { font-size: clamp(34px, 5.4vw, 55.1px); margin-block: 16.5px 16.5px; }
.pagehero p { color: var(--muted); max-width: var(--measure); font-size: 16.5px; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6.3px; }
.crumbs a { color: var(--gold); }

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(26.8px, 3vw, 34px); margin-block: 43.3px 16.5px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--body); font-size: 16.5px; font-weight: 700; margin-block: 26.8px 8px; }
.prose p { color: var(--ink); margin-bottom: 13px; }
.prose ul { color: var(--ink); padding-left: 21px; margin-bottom: 16.5px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--gold); }
/* Копче во текстот не смее да ја наследи бојата на линк —
   златен текст врз златно копче беше невидлив (1:1). */
.prose a.btn-gold { color: #150E06; }
.prose a.btn-wire { color: var(--cream); }
.prose strong { color: var(--cream); }

/* зони за достава */
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 21px; margin-block: 26.8px; }
.zone {
  padding: 26.8px 26.8px; border-radius: 14px; box-shadow: var(--lift);
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(12px);
}
.zone h3 { font-family: var(--display); font-size: 21px; font-weight: 400; margin-bottom: 8px; }
.zone p { font-size: 13px; color: var(--muted); margin-bottom: 16.5px; }
.zone .cena { font-family: var(--display); font-size: 34px; color: var(--gold); display: block; }
.zone .free { font-size: 13px; color: var(--good); display: block; margin-top: 6.3px; }

/* истакнат блок */
.callout {
  padding: 21px 26.8px; border-radius: 12px; margin-block: 26.8px;
  background: rgba(245, 200, 66, .07); border: 1px solid rgba(245, 200, 66, .22);
}
.callout b { color: var(--gold); }
.callout p { color: var(--muted); font-size: 16.5px; }

/* чести прашања */
.faq { border-top: 1px solid var(--glass-line); margin-top: 26.8px; }
.faq-item { border-bottom: 1px solid var(--glass-line); }
.faq-q {
  width: 100%; text-align: left; cursor: pointer; background: none; border: none;
  color: var(--cream); font-family: var(--display); font-size: 21px;
  padding: 21px 43.3px 21px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 26.8px; color: var(--gold); transition: transform .3s var(--ease);
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; padding-bottom: 21px; }
/* Детето мора да може да се собере до 0 — без маргина и без
   внатрешен простор, инаку затворениот одговор вири 34px. */
.faq .faq-a > * { min-height: 0; overflow: hidden; margin: 0; padding: 0; }
.faq-a p { color: var(--muted); font-size: 16.5px; }
.faq-a a { color: var(--gold); }

/* страница за благодарност и 404 */
.midpage { min-height: 74vh; display: grid; place-items: center; text-align: center; padding-block: 89.1px; }
.midpage .seal { width: 84px; height: 94px; margin: 0 auto 28px; }
.midpage h1 { font-size: clamp(34px, 6vw, 70px); margin-bottom: 16.5px; }
.midpage p { color: var(--muted); max-width: 52ch; margin-inline: auto; font-size: 16.5px; }
.midpage .cta { justify-content: center; }

@media (max-width: 540px) { .faq-q { font-size: 16.5px; } }

/* ── почит кон намалено движење ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .spot, #pollen, .cur, .cur-ring { display: none; }
  .rise { opacity: 1; transform: none; transition: none; }
  .title .line > span { transform: none; animation: none; }
  .wsplit .w > span { transform: none; }
  .mask img { clip-path: none; }
  body.hascursor, body.hascursor a, body.hascursor button { cursor: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── адаптивно ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 43.3px; }
  .herojar img { aspect-ratio: 4 / 3; object-position: 50% 68%; }
  .menu { display: none; }
  .footgrid { grid-template-columns: 1fr 1fr; }
  .spectrum { grid-template-columns: repeat(4, 1fr); }
  .title { font-size: clamp(38px, 11.5vw, 96px); }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wrap { padding-inline: 21px; }
  .band { padding-block: 70px; }
  .footgrid { grid-template-columns: 1fr; }
  .spectrum { grid-template-columns: repeat(2, 1fr); }
  .cart .v { display: none; }
  .bars { height: 130px; }
}

/* ══════════════════════════════════════════════════════════
   МОБИЛНА НАВИГАЦИЈА · бургер + панел на цел екран
   ══════════════════════════════════════════════════════════ */

/* заклучување на скрол додека фиоката или менито се отворени
   (scrollbar-gutter: stable на html спречува поместување на десктоп) */
body.locked { overflow: hidden; }

.burger { display: none; }

.mobnav {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  /* Полн непроѕирен фон. Порано беше .98 и се потпираше на
     backdrop-filter да го размачка тоа што се гледа низ него;
     во лесен режим замаглувањето го нема, па текстот од
     страницата се читаше низ менито. */
  background: linear-gradient(180deg, #080503, #140D06);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column;
  padding: 104px 32px calc(40px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .4s var(--ease), transform .45s var(--ease), visibility .4s;
}
body.menu-open .mobnav { opacity: 1; visibility: visible; transform: none; }
.mobnav nav { display: flex; flex-direction: column; }
.mobnav nav a {
  font-family: var(--display); font-size: clamp(26.8px, 9vw, 43.3px); color: var(--ink);
  padding: 16.5px 0; border-bottom: 1px solid var(--glass-line);
  display: flex; align-items: center; gap: 13px;
  transition: color .3s, transform .35s var(--ease);
}
.mobnav nav a::before {
  content: ""; width: 9px; height: 10px; flex-shrink: 0; opacity: 0;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: opacity .3s, transform .3s var(--ease);
}
.mobnav nav a:hover, .mobnav nav a:focus-visible { color: var(--gold); transform: translateX(8px); }
.mobnav nav a:hover::before, .mobnav nav a:focus-visible::before { opacity: 1; }
.mobnav-foot { margin-top: auto; padding-top: 34px; display: flex; flex-direction: column; gap: 13px; }
.mobnav-foot .btn { width: 100%; text-align: center; }

@media (max-width: 1000px) {
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 13px; flex-shrink: 0;
    background: var(--glass); border: 1px solid var(--glass-line); border-radius: 13px;
    cursor: pointer; transition: border-color .3s, box-shadow .3s;
  }
  .burger:hover { border-color: var(--gold); box-shadow: var(--glow); }
  .burger span {
    display: block; height: 2px; width: 100%; background: var(--gold);
    border-radius: 2px; transform-origin: center;
    transition: transform .35s var(--ease), opacity .25s;
  }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav .wrap { gap: 13px; }
}

@media (max-width: 440px) {
  .brand b { font-size: 21px; }
  .brand > span > span { display: none; }   /* поднасловот се крие за да собере хедерот */
  .nav .wrap { gap: 10.2px; }
}

/* штеди батерија и спречува трепкање: зрнестата текстура само на глувче-уреди */
@media (pointer: coarse) { .grain { display: none; } }

/* ── панел за нарачка по телефон ─────────────────────────── */
.kosnicka-pregled { margin: 21px 0 16.5px; }
.kosnicka-pregled h3 {
  font-family: var(--body); line-height: 1.6; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10.2px;
}
.kosnicka-lista {
  margin: 0; padding: 16.5px 16.5px; border-radius: 10px;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--glass-line);
  font-family: var(--body); font-size: 16.5px; line-height: 1.7;
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.kosnicka-lista.prazna { color: var(--muted); }

.kosnicka-uputstvo {
  font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-bottom: 16.5px;
}

.naracaj-tel {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 60px; text-align: center;
  font-size: 21px; letter-spacing: .02em; text-decoration: none;
}

.naracaj-drugi { display: flex; gap: 13px; margin-top: 13px; }
.naracaj-drugi .btn {
  flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center;
  padding: 13px 16.5px; font-size: 13px; text-decoration: none;
  border-color: var(--glass-line); color: var(--cream); background: var(--glass);
}
.naracaj-drugi .btn:hover { border-color: var(--gold); transform: translateY(-2px); }
.naracaj-info { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 13px 0 0; }

@media (max-width: 520px) {
  .naracaj-drugi { flex-direction: column; }
  .naracaj-tel { font-size: 16.5px; padding-inline: 16.5px; }
}

/* ══════════════════════════════════════════════════════════
   ЛЕСЕН РЕЖИМ  (html.lite)
   ----------------------------------------------------------
   Се пали сам на слаб уред: тесен екран, малку јадра или
   малку меморија. Ги гаси украсите што се прецртуваат на
   секој кадар. Содржината и распоредот остануваат исти.

   Најскапото не е ниту еден украс сам по себе, туку нивната
   комбинација: зрното и поленот се движат ПОД сè, па сите
   стаклени површини мораат да се замаглуваат одново на
   секој кадар.
   ══════════════════════════════════════════════════════════ */

html.lite .grain,
html.lite .spot,
html.lite #pollen,
html.lite .cur,
html.lite .cur-ring,
html.lite .preloader { display: none !important; }
/* на телефон без JS-проверка: екранот за вчитување би го покривал текстот додека не стигне site.js */
@media (max-width: 900px) { .preloader { display: none !important; } }

/* Замаглувањето зад стакло е најскапо на слаба графика.
   При проѕирност од 4.5% разликата е едвај видлива. */
html.lite .card,
html.lite .metric,
html.lite .form,
html.lite .btn,
html.lite .btn-wire,
html.lite .cart,
html.lite .mobnav,
html.lite .scrim,
html.lite .drawer,
html.lite .paynote,
html.lite .kosnicka-lista {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Картичките, метриките и панелот веќе се орев и без замаглување —
   ништо не треба да се менува во лесен режим. Останува само
   внатрешното поле, кое сè уште е стакло. */
html.lite .kosnicka-lista { background: rgba(255, 214, 138, .055); }

/* Анимиран градиент врз текст = прецртување на секој кадар.

   ВНИМАНИЕ: насловот се внесува со анимација riseline, која го
   враќа од translateY(110%) на 0. Ако тука се гасне анимацијата
   без да се врати и позицијата, редот засекогаш останува
   поместен надвор од својот исечен ред — и е НЕВИДЛИВ.
   Затоа положбата се поставува експлицитно. */
html.lite .molten { animation: none; }
html.lite .title .line > span { transform: none; }

/* Паралакс при скрол — непотребна работа на слаб уред. */
html.lite [data-para] { transform: none !important; }

/* Телефон и е-пошта се линкови што луѓето навистина ги тапкаат —
   каде и да стојат, мора да се фатливи со прст. */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* ...освен кога стојат среде реченица, каде би ја растргнале. */
p a[href^="tel:"],
p a[href^="mailto:"] { display: inline; min-height: 0; }

/* Кога линкот е целата ставка во листата, тој е копче за движење,
   не текст — треба да се фати со прст. `:only-child` е намерно:
   линк среде реченица во ставка не смее да се растегне. */
li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════════
   МОТИВ ОД ЕТИКЕТАТА
   ----------------------------------------------------------
   Теглата носи саќе по рабовите и курзивна девиза под „МЕД".
   Страницата ги повторува двете, потивко.
   ══════════════════════════════════════════════════════════ */

/* Саќе — истата шара како на етикетата, едвај видлива. */
.form,
.foot {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23E3B841' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M-1 24.5l13 7.5v15l-13 7.5L-14 47v-15l13-7.5z'/%3E%3Cpath d='M27 24.5l13 7.5v15l-13 7.5L14 47v-15l13-7.5z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}
.form { background-color: var(--walnut); }
.foot { background-color: var(--pitch); }

/* Девизата од теглата — курзив, како на етикетата. */
.deviza {
  font-family: var(--display);
  font-style: italic;
  font-size: 21px;
  color: var(--comb);
  margin: 13px 0 0;
  letter-spacing: .01em;
}
.deviza::before {
  content: "";
  display: block;
  width: 55.1px;
  height: 1px;
  background: linear-gradient(90deg, var(--comb), transparent);
  margin-bottom: 13px;
}

/* ══════════════════════════════════════════════════════════
   РИТАМ НА СЕКЦИИТЕ
   ----------------------------------------------------------
   Мерено: 72.7% од страницата беше иста темна основа, а
   ореовата боја само 16%. Правилото 60-30-10 бара обратно —
   помалку празнина, повеќе тело.

   Затоа секциите се менуваат: темна → топла → темна.
   Тополиот појас е потемен од картичките, за тие и понатаму
   да изгледаат подигнати.
   ══════════════════════════════════════════════════════════ */
.band--warm {
  background: #150F0B;
  border-block: 1px solid rgba(227, 184, 65, .07);
}

/* Галеријата не смее да се растегне кога има малку слики.
   Со `auto-fit` и само две фотографии, секоја стануваше
   575×767px — 69% од целата секција. */
.gallery {
  grid-template-columns: repeat(auto-fit, minmax(200px, 340px));
  justify-content: center;
}
.gallery figure { aspect-ratio: 3 / 4; }

/* ══════════════════════════════════════════════════════════
   ДОПИР И ПРИТИСОК
   ══════════════════════════════════════════════════════════ */

/* Фотографиите стоеја во сиво и се враќаа во боја само на hover.
   На телефон hover не постои — значи посетителот на мобилен
   НИКОГАШ не ги гледаше во боја. Ова се двете единствени
   вистински фотографии на страницата. */
@media (hover: none) {
  .gallery img { filter: saturate(1) brightness(.95) !important; }
  .gallery figure::after { opacity: 0; }
}
html.lite .gallery img { filter: saturate(1) brightness(.95) !important; }
html.lite .gallery figure::after { opacity: 0; }

/* Кога нема залиха, копчето мора и да изгледа исклучено —
   досега изгледаше исто како активното. */
.add[disabled] {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--glass-line);
  color: var(--muted);
}
.add[disabled]:hover { transform: none; border-color: var(--glass-line); }

/* Одговор на притисок. На екран на допир нема hover, па без ова
   тапкањето не дава никаква потврда дека нешто се случило.
   Само transform — не поместува распоред и не бара прецртување. */
.btn:active,
.add:not([disabled]):active,
.cart:active,
.wa:active,
.xbtn:active,
.faq-q:active { transform: translateY(1px) scale(.985); }

.card:active { transform: scale(.995); }

/* ── Заглавје на тесен екран ────────────────────────────────
   Името на брендот никогаш не смее да се прекршува на два реда. */
.brand b { white-space: nowrap; }

@media (max-width: 430px) {
  /* Износот во копчето „Кошничка" зафаќа ~40px што му требаат
     на името. Бројот на производи останува — тој е сигналот. */
  .cart .v { display: none; }
  .cart { padding-inline: 13px; }
}

/* Многу тесни телефони (320px и помали). Брендот, кошничката и
   менито не се собираат едно до друго во стандардни големини. */
@media (max-width: 360px) {
  .brand b { font-size: 16.5px; }
  .brand { gap: 8px; }
  .brand .mark { width: 26.8px; height: 26.8px; }
  .cart { padding-inline: 8px; font-size: 12px; }
  .nav .wrap { padding-inline: 8px; gap: 8px; }
}


/* ── Амблемот од етикетата како разделник ──────────────────
   Досега тука стоеја три нацртани шестоаголници. Пчелата е
   вистинскиот знак на брендот — истата што стои на теглата. */
.hexrule i { display: none; }
/* Медалјон, не залепена сликичка. Правоаголен исечок од
   етикетата на светла подлога изгледа како закрпа; круг со
   златен прстен изгледа како печат — и работи на двете теми. */
.hexrule {
  width: 84px; height: 84px; margin-inline: auto;
  border-radius: 50%;
  background: url("../images/pcela-medaljon.webp") center / cover no-repeat;
  /* Сликата мора да оди и под рамката. Инаку квадратот од
     сликата е 1px помал од кругот и на четирите страни каде
     кругот го допира квадратот се гледа проѕирна рамка —
     кругот изгледа засечен, со рамни страни. */
  background-origin: border-box;
  border: 1px solid var(--comb-line);
  box-shadow: 0 8px 21px -10px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(227, 184, 65, .16);
}
.hexrule::before, .hexrule::after { display: none; }

/* На екран на допир копчињата за количина мора да се фатливи. */
@media (hover: none), (max-width: 620px) {
  .qty button { width: 44px; height: 44px; font-size: 21px; }
  .qty span { min-width: 34px; font-size: 16.5px; }
}

/* Кога менито е отворено, пловечкото копче се тргнува — инаку
   стои врз копчето „Јави се" во самото мени и се судираат
   два исти повика на дејство. */
body.menu-open .wa,
body.locked .wa {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(21px) scale(.9);
}

/* ── Колачиња: прашање пред Google Analytics / Facebook Pixel ──
   Се појавува само ако во site.js е внесено GA4_ID или PIXEL_ID.
   „Одбиј" и „Прифаќам" се подеднакво видливи, законот бара
   одбивањето да е исто толку лесно како прифаќањето. */
.kolacinja {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 125;
  max-width: 420px; padding: 12px 14px;
  background: var(--card, var(--walnut)); color: var(--ink);
  border: 1px solid var(--comb-line); border-radius: 14px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55);
  font-size: 14.5px; line-height: 1.45;
}
.kolacinja p { margin: 0 0 10px; }
.kolacinja a { color: var(--accent, var(--gold)); }
.kolacinja-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kolacinja-btns .btn { min-height: 40px; justify-content: center; padding: 6px 8px; font-size: 14.5px; }
/* Додека прашањето е отворено, пловечкото WhatsApp копче не смее да го покрие. */
html.kolacinja-on .wa { display: none; }
.kolacinja-link {
  background: none; border: 0; padding: 0 4px; min-height: 44px;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}

/* ── календар на цветање ─────────────────────────────────── */
.prose.prose-wide { max-width: 980px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cvet { margin-top: 21px; }
.cvet-row { display: grid; grid-template-columns: minmax(96px, 170px) repeat(12, minmax(0, 1fr)); align-items: center; gap: 3px; }
.cvet-row + .cvet-row { margin-top: 3px; }
.cvet-head span { font-size: 13px; color: var(--muted); text-align: center; padding-bottom: 3px; }
.cvet-name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.cvet-cell { height: 18px; border-radius: 3px; background: rgba(138, 93, 6, .07); }
.cvet-cell.on { background: var(--comb); }
.cvet-row.drvo .cvet-cell.on { background: #A5733A; }
.cvet-head .sega { color: var(--ink); font-weight: 700; }
.cvet-cell.sega { box-shadow: inset 0 0 0 2px var(--accent, var(--gold)); }
.cvet-legend { display: flex; gap: 21px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 13px; }
.cvet-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; background: var(--comb); }
.cvet-legend .drvo i { background: #A5733A; }
.meseci { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16.5px; margin-top: 21px; }
.mesec { padding: 21px; border-radius: 12px; border: 1px solid var(--glass-line); }
.mesec h3 { font-family: var(--display); font-size: 21px; font-weight: 400; margin: 0 0 8px; }
.prose .mesec p { font-size: 16.5px; margin: 0 0 8px; }
.prose .mesec .mesec-cvet { color: var(--ink); }
.mesec.sega { border-color: var(--accent, var(--gold)); box-shadow: 0 0 0 1px var(--accent, var(--gold)); }
@media (max-width: 520px) {
  .cvet-row { grid-template-columns: 112px repeat(12, minmax(0, 1fr)); gap: 2px; }
  .cvet-name, .cvet-head span { font-size: 12.5px; }
  .cvet-cell { height: 15px; }
}

/* ── датум на статија и табели ─────────────────────────────── */
.pagehero .datum { font-size: 13px; color: var(--muted); margin-top: -6.3px; }
.tabela { margin: 21px 0; overflow-x: auto; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--glass-line); }
.tabela thead th { font-size: 13px; color: var(--muted); font-weight: 700; }
.tabela tbody th { color: var(--ink); font-weight: 700; }
.tabela td { color: var(--ink); }
@media (max-width: 520px) {
  .tabela.slozi thead { display: none; }
  .tabela.slozi tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--glass-line); }
  .tabela.slozi th, .tabela.slozi td { display: block; border: 0; padding: 2px 0; }
  .tabela.slozi tbody th { margin-bottom: 4px; }
  .tabela.slozi td::before { content: attr(data-label) ": "; color: var(--muted); }
}
.prose .slika { margin: 26.8px auto; max-width: 300px; }
.prose .slika img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* ── производи на барање и извори ──────────────────────────── */
.baranje { margin: 26.8px 0; padding: 21px; border-radius: 14px; border: 1px solid var(--glass-line); background: rgba(227, 184, 65, .08); }
.baranje-naslov { font-family: var(--display); font-size: 21px; color: var(--ink); margin: 0 0 6px; }
.prose .baranje p { margin-bottom: 8px; }
.baranje .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.izvori { font-size: 14.5px; }
.izvori li { margin-bottom: 6px; }
.drugi { margin-top: 43.3px; text-align: center; }
.drugi-red { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 10px; }
.drugi-item { display: flex; flex-direction: column; gap: 3px; min-width: 220px; padding: 16.5px 21px; border-radius: 12px; border: 1px solid var(--glass-line); color: var(--ink); text-align: left; }
.drugi-item b { font-weight: 700; }
.drugi-item span { font-size: 13.5px; color: var(--muted); }
.drugi-item:hover { border-color: var(--gold); }
.drugi-item em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--accent, var(--gold)); margin-top: 6px; }
.drugi .eyebrow { justify-content: center; }

/* ── сезонски банер ── */
.baner { position: relative; z-index: 71; background: var(--ink); color: var(--paper, #FAF4E6); text-align: center; }
.baner p { margin: 0; padding: 10px 16px; font-size: 15px; line-height: 1.45; }
.baner a { color: var(--amber, #E3B841); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 520px) { .drugi-item { min-width: 0; width: 100%; } }