/* Шрифт Kanilia из статик */
@font-face{
  font-family:"Kanilia";
  src:url("/static/fonts/Kanilia.otf") format("opentype");
  font-display:swap;
}

/* Палитра KAMO */
:root{
  --bg:#0b0f0c; --fg:#f5f7f6; --muted:#a5b3a8;
  --card:#101612; --border:#1f2a22;
  --khaki:#6b7d57; --camo:#2f4f3e; --deep:#1e3529; --teal:#2a6f6a;
  --sky:#8ecae6; --straw:#d2b48c; --bronze:#cd7f32; --orange:#ff7a1a;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,"Playfair Display",serif;
}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(0deg,#0b0f0c,#0e1612);
}
.logo-text{
  font-family:"Kanilia","Playfair Display",serif;
  font-size:26px; letter-spacing:3px; color:var(--straw); text-decoration:none;
}
.logo{ text-decoration:none }
.main-nav a{
  color:var(--muted); text-decoration:none; margin-left:18px; font-weight:500;
}
.main-nav a:hover{ color:var(--sky) }
.lang-switch a{
  margin-left:10px; text-decoration:none; color:var(--muted);
  border:1px solid var(--border); padding:6px 10px; border-radius:8px;
}
.lang-switch a.active{ color:var(--fg); border-color:var(--sky) }

.site-main{ max-width:1100px; margin:24px auto; padding:0 16px }

/* Кнопки и иконки */
.icon{
  width:22px; height:22px; vertical-align:-4px; margin-left:8px;
  fill:var(--muted);
}
.icon-link{ text-decoration:none; margin-left:14px; }
.icon-link:hover .icon{ fill:var(--sky) }

.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; border:1px solid var(--border);
  background:linear-gradient(135deg,var(--bronze),var(--orange)); color:white; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Hero */
.hero{
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:url("https://img2.akspic.ru/crops/9/5/2/1/8/181259/181259-dostupnyj-gornyj_relef-gora-holm-nagore-3840x2160.jpg") no-repeat center/cover;
  min-height:380px; display:flex; align-items:center; justify-content:center;
  position:relative; margin:8px 0 24px;
}
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.55)); }
.hero-inner{ position:relative; z-index:1; text-align:center; padding:46px 16px }
.hero h1{
  margin:0 0 10px 0;
  font-family:"Kanilia","Playfair Display",serif; font-size:74px; letter-spacing:5px;
  color:var(--straw); text-shadow:0 8px 24px rgba(0,0,0,.55);
}
.hero-sub{ margin:0 0 18px 0; color:var(--sky) }

/* Сетка каталога */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.card .thumb{ aspect-ratio:1.1/1; background:#0003; display:flex; align-items:center; justify-content:center }
.card .thumb img{ width:100%; height:100%; object-fit:cover }
.card .meta{ padding:12px 12px 14px }
.card h3{ margin:0 0 6px 0; font-size:18px }
.price{ color:var(--straw); font-weight:700 }

.flash-wrap{ max-width:1100px; margin:8px auto; padding:0 16px }
.flash{ background:#fffb; border:1px solid var(--border); padding:10px 12px; border-radius:8px; margin:6px 0 }

.site-footer{ max-width:1100px; margin:24px auto; padding:12px 16px; color:var(--muted); border-top:1px solid var(--border) }

/* === фиксированная шапка сверху === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: white;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
}

body {
    padding-top: 80px; /* подгоняем отступ под высоту шапки */
}

/* мобильная компоновка меню: уменьшаем отступы и прячем текст у иконок при узком экране */
@media (max-width: 640px){
  .main-nav a{ margin-left:10px; font-size:14px }
  .lang-switch a{ padding:4px 8px; margin-left:6px }
  .logo-text{ font-size:22px; letter-spacing:2px }
  .hero h1{ font-size:48px; letter-spacing:3px } /* крупная надпись KAMO на телефоне */
}

.hero {
    background: url("{{ url_for('static', filename='img/hero.webp.jpg') }}") no-repeat center center;
    background-size: cover;
    height: 100vh; /* заставим блок занимать весь экран */
}

/* ==== HERO SECTION ==== */
.hero {
  background-image: url("/static/img/hero.webp.jpg");
  background-size: cover;       /* картинка растягивается */
  background-position: center;  /* центрируется */
  background-repeat: no-repeat; /* не повторяется */
  height: 100vh;                /* на всю высоту экрана */
  display: flex;                /* выравнивание по центру */
  align-items: center;          /* по вертикали */
  justify-content: center;      /* по горизонтали */
  text-align: center;           /* текст по центру */
  color: white;                 /* белый текст */
  position: relative;
}

.hero-inner h1 {
  font-size: 4rem;              /* большой заголовок */
  font-weight: bold;
  text-shadow: 0 4px 10px rgba(0,0,0,0.7); /* чтобы текст не сливался */
}

.hero-sub {
  font-size: 1.5rem;
  margin-top: 10px;
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

.hero .btn {
  margin-top: 20px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.2);
  border: 2px solid white;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.hero .btn:hover {
  background: white;
  color: black;
}