*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Nunito Sans, self-hosted — was fonts.googleapis.com, an external origin
   requiring its own DNS+connect+download round trip even with preconnect.
   These are the same variable-font files Google serves (one per subset,
   font-weight: 300 800 — not 5 separate static files per subset); the
   vietnamese subset is dropped, not needed for bg/en content. AssetMapper
   fingerprints and rewrites the url() paths below automatically. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-cyrillic-ext-oGiZsb9.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-cyrillic-66wyI_G.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin-ext-4fcqcU2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin-_XvUtPZ.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 {
  --green:    #1e8530;
  --green-d:  #176826;
  --green-l:  #e8f5eb;
  --text:     #111111;
  --muted:    #666666;
  --border:   #e0e0e0;
  --bg:       #f4f4f2;
  --white:    #ffffff;
  --orange:   #e07b00;
  --orange-d: #c06900;
  --yellow:   #ffd600;
  --ff:       'Nunito Sans', 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--ff); color: var(--text); font-size: 14px; line-height: 1.5;
  background:
    radial-gradient(1000px 700px at 6% -8%, rgba(30,133,48,0.30), transparent 65%),
    radial-gradient(900px 650px at 97% 8%, rgba(227,187,86,0.42), transparent 65%),
    radial-gradient(800px 600px at 50% 35%, rgba(192,57,43,0.18), transparent 65%),
    radial-gradient(1000px 800px at 50% 105%, rgba(30,133,48,0.24), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--ff); }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════
   TOP BAR
═══════════════════════════════════════ */
.top-bar {
  background: var(--green-d);
  padding: 7px 0;
}
.top-bar-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.top-bar-left {
  display: flex; align-items: center; gap: 20px;
}
.top-bar-contact {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8);
  text-decoration: none; transition: color 0.15s;
}
.top-bar-contact:hover { color: #fff; }
.top-bar-contact svg { width: 13px; height: 13px; stroke: rgba(255,255,255,0.5); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.top-bar-dot { color: rgba(255,255,255,0.2); font-size: 16px; line-height: 1; }
.top-bar-right { display: flex; align-items: center; }

/* ── Language switcher (top bar) — segmented pill ── */
.lang-switch {
  display: flex; align-items: center; gap: 0;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 20px;
  padding: 2px; background: rgba(0,0,0,0.15);
}
.lang-opt {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ff); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.5); padding: 3px 11px; border-radius: 16px;
  letter-spacing: 0.07em; transition: color 0.15s, background 0.15s;
}
.lang-opt.active { background: #fff; color: var(--green-d); }
.lang-opt:not(.active):hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); }
.lang-divider { display: none; }

/* ═══════════════════════════════════════
   MAIN HEADER
═══════════════════════════════════════ */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.header-main {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px;
  height: 68px;
}

.logo-link { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.logo-link img { height: 36px; width: auto; }
.logo-tagline { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green-d); padding-left: 1px; }

.search-wrap { flex: 1; max-width: 640px; }
.search-wrap form { display: flex; }
.search-wrap input {
  flex: 1; height: 44px; padding: 0 16px;
  border: 2px solid var(--border); border-right: none;
  border-radius: 4px 0 0 4px;
  font-family: var(--ff); font-size: 14px; color: var(--text);
  background: #fafafa; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.search-wrap input:focus { border-color: var(--green); background: #fff; }
.search-wrap input::placeholder { color: #aaa; }
.search-btn {
  height: 44px; width: 52px;
  background: var(--green); border: none;
  border-radius: 0 4px 4px 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.2s;
}
.search-btn:hover { background: var(--green-d); }
.search-btn svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.btn-projects {
  display: flex; align-items: center; gap: 8px;
  background: #fff0ee;
  border: 1.5px solid #c0392b; padding: 9px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 800; color: #c0392b;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.btn-projects svg { width: 15px; height: 15px; stroke: #c0392b; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke 0.15s; }
.btn-projects:hover { background: #c0392b; color: #fff; }
.btn-projects:hover svg { stroke: #fff; }
.btn-call {
  display: flex; align-items: center; gap: 9px;
  background: var(--green); color: #fff;
  padding: 10px 20px; border-radius: 4px;
  font-size: 14px; font-weight: 700;
  transition: background 0.2s; white-space: nowrap;
}
.btn-call:hover { background: var(--green-d); }
.btn-call svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

.btn-promo-mobile {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: #c0392b; border-radius: 4px; flex-shrink: 0;
  transition: background 0.2s;
}
.btn-promo-mobile:hover { background: #a7302a; }
.btn-promo-mobile svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════
   CATEGORY NAV + MEGA MENU
═══════════════════════════════════════ */
.cat-nav {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.cat-nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: stretch;
}

.cat-nav-item { position: relative; }
.cat-nav-item > a {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 15px;
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.cat-nav-item > a:hover,
.cat-nav-item:hover > a {
  color: var(--green);
  border-bottom-color: var(--green);
}
.caret { font-size: 9px; color: #bbb; transition: transform 0.2s; }
.cat-nav-item.open .caret { transform: rotate(180deg); }
.cat-nav-item.open > a { color: var(--green); border-bottom-color: var(--green); }

/* Mega dropdown */
.mega-drop {
  position: absolute; top: calc(100% + 1px); left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  padding: 20px 24px;
  display: none;
  grid-template-columns: repeat(3, 160px);
  gap: 0 24px;
  z-index: 400;
  min-width: 480px;
}
/* Narrow dropdown (1 column) */
.mini-drop {
  position: absolute; top: calc(100% + 1px); left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14);
  min-width: 200px; padding: 8px 0;
  display: none; z-index: 400;
}
/* dropdowns shown via JS */
.mini-drop a {
  display: block; padding: 9px 18px;
  font-size: 13px; color: #333; font-weight: 600;
  transition: background 0.12s, color 0.12s;
}
.mini-drop a:hover { background: var(--green-l); color: var(--green); }
.mini-drop hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

.mega-col h4 {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.mega-col ul { list-style: none; }
.mega-col li { margin-bottom: 5px; }
.mega-col a {
  font-size: 13px; color: #333; font-weight: 600;
  transition: color 0.12s;
}
.mega-col a:hover { color: var(--green); }

/* Promotions — right-aligned, red accent with pulse */
.nav-promo { margin-left: auto; align-self: center; }
.nav-promo > a {
  background: #fff0ee !important;
  border: 1.5px solid #c0392b !important;
  color: #c0392b !important;
  border-radius: 4px;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid #c0392b !important;
  transition: background 0.15s, color 0.15s, transform 0.15s !important;
  animation: promo-pulse 2.2s ease-in-out infinite;
}
.nav-promo > a::before { content: '✦ '; font-size: 9px; }
.nav-promo > a:hover {
  background: #c0392b !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.nav-promo-tag { display: none; }

@keyframes promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.35); }
  50% { box-shadow: 0 0 0 6px rgba(192,57,43,0.12); }
}

/* ═══════════════════════════════════════
   PAGE WRAP
═══════════════════════════════════════ */
.page-wrap {
  max-width: 1400px; margin: 0 auto; padding: 20px 20px 60px;
}

/* ═══════════════════════════════════════
   PROMO GRID (hero + 2 side cards)
═══════════════════════════════════════ */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 290px 150px;
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .promo-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .promo-main { grid-row: auto !important; grid-column: auto !important; }
  .promo-side-top { display: none !important; }

  /* Yellow banner — full-width slim strip instead of the square desktop card.
     !important throughout: the unconditional .promo-side-bottom rules further
     down the file have equal specificity and come later in the cascade, so
     without it they win on every viewport, including mobile. */
  .promo-side-bottom {
    grid-row: auto !important; grid-column: auto !important;
    flex-direction: row !important; flex-wrap: wrap;
    align-items: center !important; justify-content: space-between !important;
    text-align: left !important; padding: 14px 16px !important;
  }
  .promo-side-bottom .promo-content {
    flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    width: 100%; gap: 12px !important;
  }
  .promo-side-bottom h2 { font-size: 15px !important; }
  .promo-side-bottom .btn { flex-shrink: 0; white-space: nowrap; }
}

.promo-card {
  border-radius: 6px; overflow: hidden;
  position: relative; display: flex; align-items: flex-end;
  padding: 26px 30px;
}
.promo-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s;
}
.promo-card:hover .promo-bg { transform: scale(1.02); }
.promo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.1) 65%, transparent 100%);
}
.promo-content { position: relative; z-index: 1; max-width: 400px; }

.promo-main { grid-row: span 2; grid-column: span 3; align-items: flex-end; }
.promo-main .promo-content { max-width: 420px; }

/* Hero carousel */
.promo-carousel { padding: 0; }
.promo-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 26px 30px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease;
}
.promo-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.promo-slide .promo-bg { transition: transform 7s linear; }
.promo-slide.active .promo-bg { transform: scale(1.07); }
.promo-dots {
  position: absolute; z-index: 2; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.promo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: none; padding: 0;
  cursor: pointer; transition: background 0.2s, width 0.2s, border-radius 0.2s;
}
.promo-dot.active { background: #fff; width: 18px; border-radius: 4px; }
.promo-arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.promo-carousel:hover .promo-arrow { opacity: 1; }
.promo-arrow:hover { background: rgba(255,255,255,0.32); }
.promo-arrow svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.promo-arrow-prev { left: 12px; }
.promo-arrow-next { right: 12px; }

.promo-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 2px;
  margin-bottom: 10px;
}
.tag-green  { background: var(--green); color: #fff; }
.tag-yellow { background: var(--yellow); color: #111; }
.tag-orange { background: var(--orange); color: #fff; }

.promo-content h2 {
  font-size: clamp(20px, 2.8vw, 32px); font-weight: 800;
  color: #fff; line-height: 1.2; margin-bottom: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.promo-content p {
  font-size: 13px; color: rgba(255,255,255,0.78);
  margin-bottom: 16px; max-width: 320px;
}
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 3px;
  font-family: var(--ff); font-size: 13px; font-weight: 800;
  transition: background 0.15s, transform 0.15s; border: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-white  { background: #fff; color: var(--green); }
.btn-white:hover  { background: var(--green-l); }
.btn-green  { background: var(--green); color: #fff; }
.btn-green:hover  { background: var(--green-d); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-d); }

.promo-side-top .promo-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 65%);
}
.promo-side-top .promo-content { max-width: 100%; }
.promo-side-top h2 { font-size: 18px; }

.promo-side-bottom {
  background: var(--yellow);
  align-items: center; justify-content: center;
  padding: 20px 24px; text-align: center;
}
.promo-side-bottom .promo-content { max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.promo-side-bottom h2 { font-size: 19px; color: #111; margin-bottom: 0; line-height: 1.25; text-shadow: none; }
.promo-side-bottom p  { display: none; }

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-hd h2 {
  font-size: 18px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.section-hd h2::before {
  content: ''; display: block;
  width: 4px; height: 20px;
  background: var(--green); border-radius: 2px; flex-shrink: 0;
}
.section-hd a {
  font-size: 13px; color: var(--green); font-weight: 700;
  display: flex; align-items: center; gap: 4px;
  transition: gap 0.15s;
}
.section-hd a:hover { gap: 8px; }

/* ═══════════════════════════════════════
   CATEGORY GRID (with images)
═══════════════════════════════════════ */
.cat-img-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 900px) { .cat-img-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cat-img-grid { grid-template-columns: repeat(2, 1fr); } }

/* Plain click-to-lightbox photo grid (static content pages) */
.page-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 24px;
}
.page-gallery-item { display: block; border-radius: 6px; overflow: hidden; cursor: zoom-in; }
.page-gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.4s; }
.page-gallery-item:hover img { transform: scale(1.05); }
@media (max-width: 900px) { .page-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .page-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-img-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.cat-img-card:hover {
  box-shadow: 0 5px 18px rgba(0,0,0,0.1);
  border-color: var(--green);
}
.cat-img-card img,
.cat-img-card .cat-img-placeholder {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform 0.4s;
}
.cat-img-card .cat-img-placeholder { display: block; background: var(--light, #f2f2f2); }
.cat-img-card:hover img { transform: scale(1.05); }
.cat-img-label {
  padding: 10px 12px;
  font-size: 16px; font-weight: 800;
  border-top: 1px solid var(--border);
}
.cat-img-sub {
  font-size: 13px; font-weight: 400; color: var(--muted);
}
.cat-img-card-wide { grid-column: span 2; }
.cat-img-card-wide img,
.cat-img-card-wide .cat-img-placeholder { aspect-ratio: 8/3; }

/* Category carousel (subcategories on a category page) */
.cat-carousel { position: relative; margin-bottom: 24px; }
.cat-carousel-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 2px;
}
.cat-carousel-track::-webkit-scrollbar { display: none; }
.cat-carousel-card { flex: 0 0 200px; scroll-snap-align: start; }
/* Subcategory source photos come in inconsistent aspect ratios — cropping
   them to 4/3 via object-fit:cover (the shared .cat-img-card default) cuts
   pieces off. Show the whole photo instead, like the product-card fix. */
.cat-carousel-card img { object-fit: contain; background: var(--white); }
.cat-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.15s;
}
.cat-carousel-arrow:hover { background: var(--green-l); }
.cat-carousel-arrow svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cat-carousel-arrow-prev { left: -6px; }
.cat-carousel-arrow-next { right: -6px; }
@media (max-width: 640px) { .cat-carousel-card { flex-basis: 150px; } }

/* ═══════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Category filters ── */
.category-layout { display: flex; align-items: flex-start; gap: 24px; }
.category-main { flex: 1; min-width: 0; }
.filter-panel {
  width: 240px; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px;
}
.filter-panel-hd { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 12px; }
.filter-clear { font-size: 12px; color: var(--green); font-weight: 700; }
.filter-clear:hover { color: var(--green-d); }
.filter-group { margin-bottom: 16px; }
.filter-group:last-of-type { margin-bottom: 0; }
.filter-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); margin-bottom: 8px; }
.filter-check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; cursor: pointer; }
.filter-check input { accent-color: var(--green); }
.filter-check-label { flex: 1; }
.filter-count { color: var(--muted); font-size: 12px; }
.filter-submit { width: 100%; margin-top: 8px; }

.filter-toggle-btn {
  display: none;
  width: 100%; align-items: center; justify-content: center; gap: 8px;
  background: var(--white); border: 1.5px solid var(--green); color: var(--green);
  border-radius: 6px; padding: 11px; font-family: var(--ff); font-size: 13.5px; font-weight: 800;
  cursor: pointer;
}
.filter-toggle-btn svg { width: 15px; height: 15px; }
.filter-toggle-badge { background: var(--green); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 10px; padding: 1px 7px; }
.filter-panel-close {
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: none; border: none; color: #999; cursor: pointer;
}
.filter-panel-close:hover { background: var(--bg); }
.filter-panel-close svg { width: 14px; height: 14px; }
.filter-overlay { display: none; }

@media (max-width: 900px) {
  /* .category-layout's 24px gap is meant for the desktop sidebar+content
     pair; once the sidebar becomes a hidden (position: fixed) drawer, only
     the toggle button and .category-main are left in flow, so that gap
     would otherwise double up with the button's own margin below. */
  .category-layout { flex-direction: column; gap: 0; }
  .filter-toggle-btn { display: flex; margin-bottom: 16px; }
  .filter-panel-close { display: flex; }

  .filter-panel {
    width: 100%;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 82vh; border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 601; overflow-y: auto;
  }
  .filter-panel.open { transform: translateY(0); }

  .filter-overlay {
    display: block;
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 600; opacity: 0; visibility: hidden; transition: opacity 0.2s;
  }
  .filter-overlay.open { opacity: 1; visibility: visible; }
}

/* ── Pagination ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 32px; }
.page-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--white);
  font-size: 13px; font-weight: 700; color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.page-link:hover { border-color: var(--green); color: var(--green-d); }
.page-link-current { background: var(--green); border-color: var(--green); color: #fff; cursor: default; }
.page-link-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.page-link-disabled { opacity: 0.35; cursor: default; }
.page-link-disabled:hover { border-color: var(--border); color: var(--text); }
.page-ellipsis { color: var(--muted); font-weight: 700; padding: 0 2px; }

.product-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
  transition: box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,0.1);
}
.product-img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--white); }
.product-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.4s;
}
.product-card:hover .product-img-wrap img { transform: scale(1.05); }
.p-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 2px;
}
.badge-new  { background: var(--green); color: #fff; }
.badge-sale { background: #e53935; color: #fff; }
.badge-top  { background: #f59e0b; color: #111; }
.badge-ord  { background: #444; color: #fff; }

.product-info { padding: 13px 15px 15px; border-top: 1px solid var(--border); display: flex; flex-direction: column; flex: 1; }
.p-cat   { font-size: 12px; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.p-name  { font-size: 16px; font-weight: 700; margin-bottom: 3px; line-height: 1.3; }
.p-desc  { font-size: 13px; color: var(--muted); margin-bottom: 11px; line-height: 1.4; }
.p-foot  { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.p-price-col { display: flex; flex-direction: column; gap: 2px; min-height: 42px; justify-content: flex-end; }
.p-price-wrap { display: flex; align-items: baseline; gap: 6px; }
.p-price { font-size: 19px; font-weight: 800; color: var(--green); }
.p-price.is-sale { color: #d32f2f; }
.p-price-inquire { font-size: 15px; }
.p-price-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.btn-ask {
  background: var(--green); color: #fff; border: none;
  padding: 8px 14px; border-radius: 3px;
  font-size: 12px; font-weight: 700; font-family: var(--ff);
  white-space: nowrap; transition: background 0.15s; flex-shrink: 0;
}
.btn-ask:hover { background: var(--green-d); }

/* ═══════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════ */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }

/* The template renders the trust strip twice (desktop position + mobile
   position, after the products); only one copy is shown at a time. */
.only-mobile { display: none; }

.trust-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; padding: 18px 16px;
  display: flex; gap: 14px; align-items: center;
}
.trust-icon { flex-shrink: 0; color: var(--green); }
.trust-icon svg { width: 32px; height: 32px; stroke: var(--green); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-title { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.trust-desc  { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ═══════════════════════════════════════
   INFO CARDS (2 col)
═══════════════════════════════════════ */
.info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }

.info-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; padding: 26px 28px;
}
.info-card.green-bg { background: var(--green-l); border-color: rgba(30,133,48,0.2); }
.info-card.green-bg h3 { color: var(--green-d); }
.info-card.green-bg .info-icon { color: var(--green); }
.info-icon { margin-bottom: 14px; }
.info-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: #999; }
.info-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.info-card p  { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }

/* ═══════════════════════════════════════
   SERVICE CARDS (3 col, icon + title + text)
═══════════════════════════════════════ */
.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-bottom: 40px;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }

.service-grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .service-grid-2col { grid-template-columns: 1fr; } }

.service-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 26px 24px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); border-color: var(--green); }
.service-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-l);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.service-icon svg { width: 24px; height: 24px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.service-card p  { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ═══════════════════════════════════════
   BRAND CARDS (logo + name + text + link)
═══════════════════════════════════════ */
.brand-card-logo { height: 56px; display: flex; align-items: center; margin-bottom: 16px; }
.brand-card-logo img { max-height: 100%; max-width: 160px; object-fit: contain; }
/* Descriptions vary in length, so without this the "Виж уебсайта" link
   lands at a different height on every card in the row. Stretch the card
   to the grid row's full height (grid items do this by default) and push
   the link to the bottom of it regardless of how much text sits above. */
.brand-card { display: flex; flex-direction: column; }
.service-card .brand-visit { display: inline-block; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--green); }
.service-card .brand-visit:hover { color: var(--green-d); }

/* ═══════════════════════════════════════
   FINANCE PARTNERS CARD (dark, for white-only logos)
═══════════════════════════════════════ */
.finance-partners-card { background: var(--green-d); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.finance-partners-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.finance-partners-logos { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }
.finance-partners-logos img { height: 38px; width: auto; }

/* ═══════════════════════════════════════
   LOYALTY BANNER (homepage attention-grabber)
═══════════════════════════════════════ */
.loyalty-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #f7d774, #eab52e 55%, #d69412);
  border-radius: 8px;
  padding: 28px 32px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.loyalty-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: loyalty-shine 4.5s ease-in-out infinite;
}
@keyframes loyalty-shine {
  0%   { background-position: 200% 0%; }
  55%  { background-position: -50% 0%; }
  100% { background-position: -50% 0%; }
}
.loyalty-banner-icon {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
}
.loyalty-banner-icon svg { width: 26px; height: 26px; stroke: #4a2f00; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loyalty-banner-text { position: relative; z-index: 1; flex: 1; min-width: 240px; }
.loyalty-banner-badge {
  display: inline-block; background: #4a2f00; color: #ffe9a8;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.loyalty-banner-text h3 { font-size: 19px; font-weight: 800; color: #3a2600; margin-bottom: 4px; }
.loyalty-banner-text p { font-size: 13px; color: #5c3f00; max-width: 460px; }
.loyalty-banner-cta {
  position: relative; z-index: 1; flex-shrink: 0;
  background: #3a2600; color: #ffe9a8; font-weight: 800; font-size: 13px;
  padding: 12px 22px; border-radius: 5px; display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s, background 0.15s;
}
.loyalty-banner-cta:hover { transform: translateY(-1px); background: #2a1b00; }
@media (max-width: 640px) { .loyalty-banner { padding: 22px; } }

/* ── Loyalty page "how it works" steps ── */
.loyalty-tagline { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-d); margin-bottom: 8px; }
.loyalty-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.loyalty-step { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; }
.loyalty-step-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-l); color: var(--green-d); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.loyalty-step h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.loyalty-step p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.loyalty-note { background: var(--green-l); border: 1px solid rgba(30,133,48,0.2); border-radius: 8px; padding: 16px 18px; font-size: 13px; color: var(--green-d); line-height: 1.7; }

/* ── Loyalty rewards card (refer-a-friend) ── */
.loyalty-tiers-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.loyalty-tiers-head { padding: 18px 20px 4px; }
.loyalty-tiers-head h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.loyalty-reward-list { display: flex; flex-direction: column; padding: 10px 20px; gap: 14px; }
.loyalty-reward-item { display: flex; align-items: center; gap: 14px; }
.loyalty-reward-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--green-l); display: flex; align-items: center; justify-content: center; }
.loyalty-reward-icon svg { width: 20px; height: 20px; stroke: var(--green-d); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loyalty-reward-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.loyalty-reward-value { font-size: 14px; font-weight: 800; color: var(--text); }
.loyalty-tiers-note { font-size: 11px; color: var(--muted); line-height: 1.6; padding: 14px 20px 18px; border-top: 1px solid var(--border); margin-top: 4px; }
.loyalty-footer-tagline { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); font-style: italic; margin-top: 14px; }

/* ═══════════════════════════════════════
   CONTACT CARDS (store + map)
═══════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.contact-card-map iframe { width: 100%; height: 200px; border: 0; display: block; }
.contact-card-body { padding: 18px 20px; }
.contact-card-body h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.contact-card-body h3 svg { width: 18px; height: 18px; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.contact-card-body p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.contact-card-body a { color: var(--green); font-weight: 700; }

.contact-hours { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 20px; }
.contact-hours h3 { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.contact-hours-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.contact-hours-row span:last-child { font-weight: 700; color: var(--text); }
.contact-hours-row:last-child { border-bottom: none; }

.contact-socials-block { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.contact-socials-block h3 { font-size: 16px; font-weight: 800; }

/* ═══════════════════════════════════════
   STORES SECTION
═══════════════════════════════════════ */
.stores-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; margin-bottom: 24px;
}
@media (max-width: 860px) { .stores-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .stores-grid { grid-template-columns: 1fr; } }
.store-cta-card {
  background: var(--green); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 28px; gap: 16px; text-align: center;
  min-width: 220px;
}
.store-cta-card svg { width: 36px; height: 36px; stroke: rgba(255,255,255,0.7); fill: none; stroke-width: 1.5; }
.store-cta-card h3 { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.3; }
.store-cta-card p { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.store-cta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--green);
  padding: 10px 20px; border-radius: 4px;
  font-size: 13px; font-weight: 800;
  transition: opacity 0.15s;
}
.store-cta-btn:hover { opacity: 0.9; }
@media (max-width: 860px) { .store-cta-card { min-width: unset; } }

.store-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; padding: 28px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-align: center;
}
.store-card-head {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 18px; padding-bottom: 18px; width: 100%;
  border-bottom: 1px solid var(--border);
}
.store-city { font-size: 18px; font-weight: 800; }
.store-addr { font-size: 12px; color: var(--muted); }
.store-contacts {
  display: flex; flex-direction: column; gap: 7px;
  margin-bottom: 20px; width: 100%;
}
.store-contacts a { font-size: 13px; color: var(--text); transition: color 0.15s; font-weight: 600; }
.store-contacts a:hover { color: var(--green); }
.store-hours-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.store-hours-days { font-size: 11px; font-weight: 800; color: #888; letter-spacing: 0.04em; }
.store-hours-blocks { display: flex; gap: 6px; justify-content: center; }
.store-hours-block {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.store-hours-label { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #bbb; }
.store-hours-time  { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.btn-map {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-l); color: var(--green);
  padding: 9px 16px; border-radius: 4px;
  font-size: 12px; font-weight: 800;
  transition: background 0.15s; align-self: center; margin-top: auto;
}
.btn-map:hover { background: var(--green); color: #fff; }
.btn-map svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ═══════════════════════════════════════
   BRANDS CAROUSEL
═══════════════════════════════════════ */
.brands-carousel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 6px; padding: 22px 0;
  margin-bottom: 24px;
  overflow: hidden; position: relative;
}
.brands-carousel::before, .brands-carousel::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
}
.brands-carousel::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.brands-carousel::after  { right: 0; background: linear-gradient(to left, var(--white), transparent); }
.brands-track {
  display: flex; gap: 56px; align-items: center; width: max-content;
  animation: brands-scroll 60s linear infinite;
}
.brands-carousel:hover .brands-track { animation-play-state: paused; }
.brand-logo {
  height: 30px; width: auto; max-width: 110px;
  object-fit: contain; flex-shrink: 0;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.2s;
}
.brand-logo:hover { filter: grayscale(0) opacity(1); }
@keyframes brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer { background: #1a1a1a; padding: 48px 0 28px; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 36px;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

.footer-logo { display: block; margin-bottom: 10px; }
.footer-logo img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; }
.footer-desc { font-size: 13px; color: #888; line-height: 1.6; max-width: 260px; margin-bottom: 18px; }
.footer-contacts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fc-row { display: flex; align-items: flex-start; gap: 9px; }
.fc-icon { flex-shrink: 0; margin-top: 2px; color: #555; }
.fc-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.fc-text { font-size: 12px; color: #999; line-height: 1.5; }
.fc-text a { color: #ccc; transition: color 0.15s; }
.fc-text a:hover { color: var(--green); }
.footer-socials { display: flex; gap: 8px; }
.fsoc {
  width: 34px; height: 34px; border-radius: 6px;
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); transition: color 0.2s;
}
.fsoc svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fsoc:hover { color: var(--green); }

.fsoc-fb { background: #1877f2; color: #fff; }
.fsoc-fb:hover { background: #166fe0; color: #fff; }

.fsoc-ig { background: linear-gradient(45deg, #f9ce34, #f58529, #dd2a7b, #8134af, #515bd4); color: #fff; }
.fsoc-ig:hover { filter: brightness(1.12); color: #fff; }

.fsoc-tt { background: #000; color: #fff; }
.fsoc-tt:hover { background: #1a1a1a; color: #fff; }

.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 13px; color: #888; transition: color 0.15s; }
.footer-col a:hover { color: var(--green); }
.footer-review-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.footer-review-qr img { border-radius: 6px; }
.footer-review-desc { font-size: 11px; color: #666; line-height: 1.5; text-align: center; }

/* financing partners row */
.footer-finance {
  margin-top: 20px; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; gap: 20px;
}
.finance-left { display: flex; flex-direction: column; gap: 10px; }
.finance-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #555; }
.finance-logos { display: flex; align-items: center; gap: 20px; }
.finance-logos img { height: 40px; width: auto; opacity: 0.85; transition: opacity 0.15s; }
.finance-logos img:hover { opacity: 1; }
.footer-cta-btn {
  margin-left: auto;
  display: inline-flex; align-self: center;
  background: var(--green); color: #fff !important;
  padding: 11px 20px; border-radius: 4px;
  font-size: 13px; font-weight: 800;
  transition: background 0.15s; white-space: nowrap;
}
.footer-cta-btn:hover { background: var(--green-d) !important; color: #fff !important; }

.footer-seo-text {
  font-size: 11px; line-height: 1.7; color: #777;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-bottom {
  padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom p { font-size: 12px; color: #555; }
.footer-bottom p a { color: #888; transition: color 0.15s; }
.footer-bottom p a:hover { color: #aaa; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 12px; color: #555; transition: color 0.15s; }
.footer-bottom-links a:hover { color: #888; }

/* ═══════════════════════════════════════
   ENGLISH POPUP
═══════════════════════════════════════ */
.en-popup {
  position: fixed; bottom: 24px; right: 24px; z-index: 9000;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.16);
  padding: 20px 22px; max-width: 290px;
  transform: translateY(16px); opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s;
  pointer-events: none;
}
.en-popup.show { transform: translateY(0); opacity: 1; pointer-events: all; }
.en-popup-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; font-size: 16px;
  color: #aaa; cursor: pointer; line-height: 1; padding: 2px 6px;
  transition: color 0.15s;
}
.en-popup-close:hover { color: var(--text); }
.en-popup-flag { font-size: 26px; margin-bottom: 8px; display: block; }
.en-popup h3 { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.en-popup p  { font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.en-popup .btn-en {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green); color: #fff;
  padding: 9px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 700;
  transition: background 0.15s;
}
.en-popup .btn-en:hover { background: var(--green-d); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .header-main { gap: 12px; }
  .btn-projects { display: none; }
}
@media (max-width: 600px) {
  .top-bar-left span, .top-bar-left .top-bar-sep { display: none; }
}

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb-bar {
  background: #ececea; border-bottom: 1px solid var(--border);
}
.breadcrumb-bar-inner {
  max-width: 1400px; margin: 0 auto; padding: 8px 20px;
}
.breadcrumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.15s; display: flex; align-items: center; gap: 5px; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb-sep { color: #b8b8b6; font-size: 11px; line-height: 1; }
.breadcrumb-current { color: var(--green-d); font-weight: 800; }

/* ═══════════════════════════════════════
   PRODUCT PAGE — LAYOUT
═══════════════════════════════════════ */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 0 0 80px;
  align-items: start;
}
/* Grid items default to a min-width equal to their content's min-content
   size, so the (sticky, i.e. positioned) gallery column can outgrow its 1fr
   track and paint over the static info-panel column next to it. Force both
   columns to respect the track width instead. */
.product-layout > * { min-width: 0; }
@media (max-width: 960px) { .product-layout { grid-template-columns: 1fr; } }

/* Sticky side column for two-column static pages (e.g. custom-furniture inquiry box) */
.page-side-sticky { position: sticky; top: 122px; align-self: start; }
@media (max-width: 960px) { .page-side-sticky { position: static; } }

/* 60/40 two-column layout for content-heavy pages next to a lighter side panel */
.page-layout-60-40 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  padding: 0 0 80px;
  align-items: start;
}
.page-layout-60-40 > * { min-width: 0; }
@media (max-width: 960px) { .page-layout-60-40 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   LEGAL PAGES (privacy / complaints)
═══════════════════════════════════════ */
.legal-updated { font-size: 12px; color: var(--muted); margin: 0 0 18px; }

.legal-toc { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px; }
.legal-toc h3 { font-size: 13px; font-weight: 800; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: legal-toc; }
.legal-toc li { counter-increment: legal-toc; margin-bottom: 10px; }
.legal-toc li:last-child { margin-bottom: 0; }
.legal-toc a { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; transition: color 0.15s; }
.legal-toc a::before {
  content: counter(legal-toc); flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-l); color: var(--green-d); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.legal-toc a:hover { color: var(--green); }

.legal-contact-card { margin-top: 20px; background: var(--green-l); border-radius: 8px; padding: 20px 22px; }
.legal-contact-card h3 { font-size: 14px; font-weight: 800; margin-bottom: 10px; color: var(--green-d); }
.legal-contact-card p { font-size: 13px; line-height: 1.6; margin-bottom: 4px; }
.legal-contact-card p:last-child { margin-bottom: 0; }
.legal-contact-card a { color: var(--green-d); font-weight: 700; text-decoration: none; }
.legal-contact-card a:hover { text-decoration: underline; }

.legal-section { margin-bottom: 28px; scroll-margin-top: 140px; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.legal-section h2 .legal-section-num { color: var(--green); }
.legal-section p { font-size: 14.5px; line-height: 1.8; color: var(--text); margin-bottom: 10px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section p.legal-list-item {
  padding-left: 14px; border-left: 2px solid var(--border);
  margin-bottom: 8px; font-size: 14px; line-height: 1.7;
}

/* ── Gallery ── */
/* top must clear the sticky .site-header (measured ~114px), plus a small margin */
.gallery { position: sticky; top: 122px; z-index: 1; }
@media (max-width: 960px) {
  /* Sticky gallery only makes sense next to a taller info column; once the
     layout stacks to one column it pins over content while scrolling.
     This override must stay *after* the base .gallery rule above — equal
     specificity means source order decides, and a media query earlier in
     the file loses to an unconditional rule later in the file. */
  .gallery { position: static; }
}
.gallery-main { background: var(--bg); border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; cursor: zoom-in; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.gallery-main:hover img { transform: scale(1.04); }
.gallery-zoom-hint { position: absolute; bottom: 10px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.35); padding: 3px 7px; border-radius: 4px; display: flex; align-items: center; gap: 4px; }
.gallery-zoom-hint svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; z-index: 2; }
.gallery-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.gallery-arrow svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gallery-arrow-prev { left: 10px; }
.gallery-arrow-next { right: 10px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 6px; }
.gallery-thumb { border-radius: 6px; overflow: hidden; aspect-ratio: 1; cursor: pointer; transition: opacity 0.15s, transform 0.15s; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:not(.active) { opacity: 0.5; }
.gallery-thumb:hover { opacity: 0.85; transform: scale(1.03); }
.gallery-thumb.active { opacity: 1; outline: 2.5px solid var(--green); outline-offset: 2px; }

/* ── Lightbox ── */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 1000; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
.lightbox-close { position: fixed; top: 20px; right: 24px; background: none; border: none; cursor: pointer; color: #fff; font-size: 36px; line-height: 1; opacity: 0.7; transition: opacity 0.15s; }
.lightbox-close:hover { opacity: 1; }
.lightbox-arrow {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.25); }
.lightbox-arrow svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-arrow-prev { left: 16px; }
.lightbox-arrow-next { right: 16px; }

/* ── Product info panel ── */
.product-info-panel { display: flex; flex-direction: column; gap: 0; }
.product-name { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--text); margin-bottom: 2px; }
.product-badge { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 16px; display: block; }
.product-sku { font-size: 11px; color: #aaa; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 16px; }

/* ── Top price label (set page) ── */
.top-price-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa; margin-bottom: 4px; }
.btn-to-form { display: flex; align-items: center; gap: 7px; flex-shrink: 0; background: var(--green); color: #fff; font-family: var(--ff); font-size: 13px; font-weight: 800; padding: 11px 18px; border-radius: 5px; border: none; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.btn-to-form:hover { background: var(--green-d); }
.btn-to-form svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Product tabs ── */
.prod-tabs { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 0; }
.prod-tab-nav { display: flex; gap: 6px; margin-bottom: 16px; }
.prod-tab-btn { background: none; border: none; padding: 7px 16px; font-family: var(--ff); font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 20px; transition: background 0.15s, color 0.15s; }
.prod-tab-btn:hover { background: var(--bg); color: var(--text); }
.prod-tab-btn.active { background: var(--green); color: #fff; }
.prod-tab-panel { display: none; }
.prod-tab-panel.active { display: block; }
.prod-tab-desc { font-size: 14px; color: var(--muted); line-height: 1.75; white-space: pre-line; }
.prod-tab-desc p, .prod-tab-desc ul { margin: 0 0 12px; }
.prod-tab-desc p:last-child, .prod-tab-desc ul:last-child { margin-bottom: 0; }
.prod-tab-desc ul { padding-left: 20px; }
.prod-tab-desc li { margin-bottom: 4px; }
.prod-tab-desc strong { color: var(--text); font-weight: 700; }

/* ── Item groups (configurable set) ── */
.pkg-summary { background: var(--green-l); border: 1px solid rgba(30,133,48,0.2); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 12px; color: var(--green-d); font-weight: 700; display: flex; align-items: flex-start; gap: 10px; }
.pkg-summary svg { width: 15px; height: 15px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; margin-top: 1px; }
.group-title { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #aaa; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.group-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.item-group { margin-bottom: 14px; }
.item-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; transition: opacity 0.1s; }
.item-card:last-child { border-bottom: none; }
.item-card:hover .item-name { color: var(--green-d); }
.item-card.selected .el-icon { background: var(--green-l); }
.item-card.selected .el-icon svg { stroke: var(--green-d); }
.item-card.selected .el-price { color: var(--green-d); }
.item-body { flex: 1; min-width: 0; }
.item-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; transition: color 0.15s; }
.item-dims { font-size: 11px; color: #aaa; font-weight: 600; }

/* ── Unified element row ── */
.el-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s; overflow: hidden; }
.el-icon svg { width: 13px; height: 13px; stroke: #ccc; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.15s; }
.el-icon-photo { width: 44px; height: 44px; }
.el-icon-photo img { width: 100%; height: 100%; object-fit: contain; }
.el-right { text-align: right; flex-shrink: 0; }
.el-price { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1; transition: color 0.15s; }
.el-dims-right { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.el-qty { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; visibility: hidden; opacity: 0; transition: opacity 0.15s; }
.item-card.selected .el-qty { visibility: visible; opacity: 1; }
.qty-btn { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.qty-btn:hover { background: var(--green-l); border-color: var(--green); }
.qty-value { min-width: 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text); }

/* ── Inquiry form ── */
.form-summary { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.form-summary-top { display: flex; align-items: baseline; gap: 10px; }
.form-summary-eur { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
.form-summary-vat { font-size: 10px; font-weight: 600; color: #bbb; letter-spacing: 0.04em; text-transform: uppercase; }
.form-summary-items { display: flex; flex-direction: column; gap: 3px; }
.form-summary-items div { font-size: 12px; color: #888; font-weight: 600; }
.inquiry-box { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.inquiry-head { background: var(--green); padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.inquiry-head svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.inquiry-head-title { font-size: 14px; font-weight: 800; color: #fff; }
.inquiry-head-sub { font-size: 11px; color: rgba(255,255,255,0.75); }
.inquiry-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #999; }
.form-input, .form-textarea { font-family: var(--ff); font-size: 13px; font-weight: 600; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); transition: border-color 0.15s, background 0.15s; outline: none; }
.form-input:focus, .form-textarea:focus { border-color: var(--green); background: var(--white); }
.form-textarea { resize: vertical; min-height: 90px; }
.btn-inquiry { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--green); color: #fff; font-family: var(--ff); font-size: 14px; font-weight: 800; padding: 13px 20px; border-radius: 5px; border: none; cursor: pointer; width: 100%; transition: background 0.15s, transform 0.15s; }
.btn-inquiry:hover { background: var(--green-d); transform: translateY(-1px); }
.btn-inquiry svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.inquiry-note { font-size: 11px; color: #aaa; text-align: center; padding: 0 20px 16px; line-height: 1.6; }
.inquiry-note a { color: var(--green); font-weight: 700; }
.inquiry-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { font-size: 12px; font-weight: 700; color: #c0392b; background: #fff0f0; border: 1px solid #f5c2c2; border-radius: 5px; padding: 10px 14px; display: none; }
.form-error.show { display: block; }

/* ═══════════════════════════════════════
   PRODUCT PAGE — PRICE BLOCK
═══════════════════════════════════════ */
.product-price-block { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.product-price-block.is-sale { border-color: #f5c2c2; background: #fff8f8; }
.price-main { display: flex; flex-direction: column; gap: 3px; }
.price-eur-row { display: flex; align-items: baseline; gap: 10px; }
.price-eur { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
.price-eur.is-sale { color: #c0392b; }
.price-eur-inquire { font-size: 20px; }
.price-old-eur { font-size: 16px; font-weight: 600; color: #ccc; text-decoration: line-through; }
.price-vat { font-size: 10px; color: #aaa; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 2px; }

/* ── Quick specs ── */
.quick-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.quick-specs .qs-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.qs-item { background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.qs-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #aaa; }
.qs-value { font-size: 13px; font-weight: 700; color: var(--text); }

/* ── Specs / components list ── */
.specs-section { margin-bottom: 0; }
.specs-title { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #aaa; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.specs-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.el-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.el-row:last-child { border-bottom: none; }
.el-body { flex: 1; min-width: 0; }
.el-name { font-size: 13px; font-weight: 700; color: var(--text); }
.el-dims { font-size: 11px; color: #aaa; font-weight: 600; margin-top: 1px; }
.specs-table td:last-child { font-weight: 700; color: var(--text); text-align: right; white-space: nowrap; }

/* ═══════════════════════════════════════
   MOBILE — HAMBURGER BUTTON
═══════════════════════════════════════ */
.mob-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: none; border: 1.5px solid var(--border);
  border-radius: 4px; cursor: pointer; flex-shrink: 0;
}
.mob-menu-btn svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; }

/* ═══════════════════════════════════════
   MOBILE — NAV DRAWER
═══════════════════════════════════════ */
.mob-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 500;
  animation: mobFadeIn 0.2s;
}
.mob-overlay.open { display: block; }
@keyframes mobFadeIn { from { opacity: 0; } to { opacity: 1; } }

.mob-nav {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 290px; max-width: 88vw;
  background: var(--white); z-index: 600;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}
.mob-nav.open { transform: translateX(0); }

.mob-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.07); flex-shrink: 0;
}
.mob-logo img { height: 28px; width: auto; }
.mob-nav-close {
  width: 32px; height: 32px; background: none; border: none;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.mob-nav-close:hover { background: var(--bg); }
.mob-nav-close svg { width: 16px; height: 16px; stroke: #999; fill: none; stroke-width: 2; stroke-linecap: round; }

.mob-nav-body { flex: 1; overflow-y: auto; }

.mob-search { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mob-search form { display: flex; }
.mob-search input {
  flex: 1; height: 38px; padding: 0 11px;
  border: 1.5px solid var(--border); border-right: none;
  border-radius: 4px 0 0 4px; font-family: var(--ff); font-size: 13px; outline: none;
  background: #fafafa;
}
.mob-search input:focus { border-color: var(--green); }
.mob-search button {
  height: 38px; width: 40px; background: var(--green); border: none;
  border-radius: 0 4px 4px 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mob-search button svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; }

.mob-cat-item { border-bottom: 1px solid rgba(0,0,0,0.055); }
.mob-cat-row { display: flex; align-items: stretch; }
.mob-cat-link {
  flex: 1; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--text); display: block;
  transition: color 0.15s;
}
.mob-cat-link:hover { color: var(--green); }
.mob-cat-expand {
  width: 44px; background: none; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mob-cat-expand svg {
  width: 13px; height: 13px; stroke: #ccc; fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s, stroke 0.2s;
}
.mob-cat-item.open .mob-cat-expand svg { transform: rotate(180deg); stroke: var(--green); }

.mob-cat-sub { display: none; }
.mob-cat-item.open .mob-cat-sub { display: block; }
.mob-cat-sub-hd {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green); padding: 10px 14px 2px 32px;
}
.mob-cat-sub a {
  display: block; padding: 8px 14px 8px 32px;
  font-size: 13px; color: #777; font-weight: 600; transition: color 0.12s;
}
.mob-cat-sub a:hover { color: var(--green); }

.mob-nav-section { padding: 6px 8px; border-top: 1px solid rgba(0,0,0,0.055); }
.mob-nav-section-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: #555;
  transition: color 0.15s, background 0.15s;
}
.mob-nav-section-link svg { width: 14px; height: 14px; stroke: #bbb; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.mob-nav-section-link:hover { color: var(--green); background: var(--green-l); }
.mob-nav-section-link:hover svg { stroke: var(--green); }

.mob-nav-actions {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.mob-nav-actions .btn-projects { white-space: normal; display: flex; }

.mob-nav-foot {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 16px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; flex-shrink: 0;
}
.mob-nav-tel, .mob-nav-email {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.mob-nav-tel svg, .mob-nav-email svg {
  width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0;
}
.mob-nav-tel:hover, .mob-nav-email:hover { color: var(--green); }

/* ═══════════════════════════════════════
   RESPONSIVE — ≤ 768px (MOBILE)
═══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Show hamburger + mobile promo icon, hide desktop cat-nav */
  .mob-menu-btn { display: flex; }
  .btn-promo-mobile { display: flex; }
  .cat-nav { display: none; }

  /* Trust strip after categories + products on mobile: the template has it
     twice (.only-desktop in its normal spot, .only-mobile after products);
     swap which copy is shown instead of reordering anything. */
  .only-desktop { display: none !important; }
  .only-mobile { display: grid !important; }

  /* Body background — the 4 radial gradients are sized in fixed px for a
     wide desktop viewport, where they read as soft blobs with flat --bg
     color between them. At mobile width each one is 2-3x wider than the
     whole screen, so they overlap almost completely edge to edge and
     compound into one dense, dark wash instead of a light decoration. */
  body {
    background:
      radial-gradient(420px 300px at 6% -8%, rgba(30,133,48,0.20), transparent 65%),
      radial-gradient(380px 280px at 97% 8%, rgba(227,187,86,0.28), transparent 65%),
      radial-gradient(340px 260px at 50% 35%, rgba(192,57,43,0.12), transparent 65%),
      radial-gradient(420px 340px at 50% 105%, rgba(30,133,48,0.16), transparent 65%),
      var(--bg);
  }

  /* Top bar — hide email */
  .top-bar-inner { padding: 0 14px; }
  .top-bar-left > a:last-child,
  .top-bar-dot { display: none; }

  /* Header — wrap search to second row */
  .header-main {
    flex-wrap: wrap; height: auto;
    padding: 10px 14px; row-gap: 8px;
    align-items: center;
  }
  .logo-link { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .search-wrap { order: 3; width: 100%; max-width: 100%; flex: none; }

  /* Carousel — стрелките горе до точките, съдържание долу */
  .promo-grid { grid-template-rows: 260px; }
  .promo-slide { padding: 16px; }
  .promo-content { max-width: 100%; }

  /* The desktop overlay is a horizontal gradient sized for a wide hero
     (dark only under a left-aligned text column, most of the image stays
     clear on the right). At mobile width that same gradient's dark zone
     covers almost the whole narrow slide edge-to-edge, reading as a flat
     dark photo. Switch to a bottom-up gradient instead — dark only behind
     the text that sits at the bottom, clear near the top. */
  .promo-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 45%, transparent 72%);
  }
  .promo-content p { display: none; }
  .promo-content h2 { font-size: 20px; margin-bottom: 8px; }
  .promo-content .btn { padding: 8px 14px; font-size: 12px; }
  .promo-arrow {
    top: 8px; transform: none;
    opacity: 0.85; width: 30px; height: 30px;
  }
  .promo-arrow-prev { left: 10px; }
  .promo-arrow-next { right: 10px; }

  /* Page wrap */
  .page-wrap { padding: 12px 12px 40px; }

  /* Section header */
  .section-hd h2 { font-size: 16px; }

  /* ── Footer — centered layout ── */
  footer { padding: 32px 0 20px; }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    margin-bottom: 24px;
  }

  /* First col (logo + desc + contacts + socials) */
  .footer-logo { display: flex; justify-content: center; margin-bottom: 10px; }
  .footer-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
  .footer-contacts { align-items: center; }
  .fc-row { justify-content: center; text-align: left; }
  .footer-socials { justify-content: center; }

  /* Category & Info cols — horizontal wrapping links */
  .footer-col ul {
    flex-direction: row; flex-wrap: wrap;
    justify-content: center; gap: 2px 0;
  }
  .footer-col li a {
    padding: 2px 10px;
    border-right: 1px solid #2e2e2e;
    line-height: 1.8;
  }
  .footer-col li:last-child a { border-right: none; }

  /* QR col */
  .footer-col:last-child { display: none; }

  /* Finance */
  .footer-finance {
    flex-direction: column; align-items: center;
    gap: 14px; text-align: center;
    flex-wrap: wrap;
  }
  .finance-left { align-items: center; }
  .finance-logos { justify-content: center; }
  .footer-cta-btn { margin-left: 0; width: 100%; justify-content: center; }

  /* Bottom */
  .footer-bottom { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .footer-seo-text { text-align: center; }

  /* ── Product page ── */
  .product-price-block { flex-wrap: wrap; align-items: flex-start; }
  .product-price-block > div:last-child { width: 100%; align-items: stretch; }
  .btn-to-form { width: 100%; justify-content: center; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .price-eur { font-size: 26px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — ≤ 500px (SMALL MOBILE)
═══════════════════════════════════════ */
@media (max-width: 500px) {
  /* Call button — icon only, matched to the other header icon buttons */
  .btn-call span { display: none; }
  .btn-call { width: 38px; height: 38px; padding: 0; justify-content: center; }

  /* Trust strip — single col */
  .trust-strip { grid-template-columns: 1fr; }

  /* Cat grid wide card — reset to normal */
  .cat-img-card-wide { grid-column: span 1; }
  .cat-img-card-wide img { aspect-ratio: 4/3; }

  /* Product grid — single col */
  .product-grid { grid-template-columns: 1fr; }

  /* Promo */
  .promo-grid { grid-template-rows: 210px; }
  .promo-content h2 { font-size: 20px; }
  .promo-slide { padding: 14px; }
}