:root{
  --bg:#f4f6f1;
  --text:#1f2937;
  --muted:rgba(31,41,55,.62);
  --border:rgba(31,41,55,.10);
  --surface:rgba(255,255,255,.72);
  --surface2:rgba(255,255,255,.88);
  --shadow:0 14px 40px rgba(31,41,55,.10);
  --shadow2:0 10px 28px rgba(31,41,55,.08);
  --r:26px; --r2:18px;
  --g:#6e805d;
  --gSoft:rgba(110,128,93,.14);
  --gSoft2:rgba(110,128,93,.22);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:16px}

/* top */
.pillbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.60);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;flex:0 0 auto}
.brand .mark{
  width:34px;height:34px;border-radius:14px;background:var(--gSoft2);
  display:flex;align-items:center;justify-content:center;
}
.nav{
  flex:1 1 auto;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  color:rgba(31,41,55,.75);font-size:14px;
}
.nav a{padding:7px 10px;border-radius:999px}
.nav a:hover{background:rgba(31,41,55,.06)}
.right{display:flex;gap:10px;align-items:center;flex:0 0 auto}

.lang{
  display:flex;gap:6px;padding:6px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.55);
}
.lang a{font-size:12px;padding:6px 8px;border-radius:999px;color:rgba(31,41,55,.75)}
.lang a.active{background:var(--gSoft2);font-weight:900}

.btn{
  border:none;cursor:pointer;padding:10px 14px;border-radius:999px;
  font-weight:900;font-size:14px;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;white-space:nowrap;
}
.btn.primary{background:var(--g);color:#fff;box-shadow:0 10px 22px rgba(110,128,93,.26)}
.btn.ghost{background:rgba(255,255,255,.55);border:1px solid var(--border);color:rgba(31,41,55,.85)}

/* hero */
.hero{
  margin-top:14px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:
    radial-gradient(1200px 380px at 65% 48%, rgba(110,128,93,.24), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.55));
  display:grid;grid-template-columns: 1.08fr .92fr;min-height:300px;
}
.hero .left{padding:40px}
.hero h1{margin:0 0 8px;font-size:52px;line-height:1.05;letter-spacing:-.02em}
.hero p{margin:0 0 16px;color:var(--muted);max-width:56ch;font-size:17px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .img{
  position:relative;border-left:1px solid var(--border);
  background:url('/uploads/_placeholder.jpg') center right / cover no-repeat;
}
.hero .img::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(520px 220px at 30% 55%, rgba(244,246,241,1), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Cg opacity='0.14'%3E%3Ccircle cx='140' cy='120' r='52' fill='%236e805d'/%3E%3Ccircle cx='210' cy='90' r='22' fill='%236e805d'/%3E%3Ccircle cx='260' cy='120' r='18' fill='%236e805d'/%3E%3Ccircle cx='220' cy='150' r='20' fill='%236e805d'/%3E%3Ccircle cx='180' cy='160' r='18' fill='%236e805d'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-position:left center, 70% 38%;
  background-size:auto, 380px;
  pointer-events:none;
}

/* cards */
.cards{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.info{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 16px;box-shadow:var(--shadow2);
  display:flex;gap:12px;align-items:center;
}
.info .ico{
  width:42px;height:42px;border-radius:16px;background:var(--gSoft2);
  display:flex;align-items:center;justify-content:center;font-weight:900;
}
.info h3{margin:0;font-size:15px}
.info p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* sections */
.section{margin-top:18px}
.section h2{margin:0 0 8px;font-size:20px}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
.select,input.q{
  padding:10px 14px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.70);box-shadow:0 10px 22px rgba(31,41,55,.05);
  font-size:14px;outline:none;
}
.reset{
  padding:10px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--gSoft);font-weight:900;
}

/* catalog */
.catalog{display:grid;grid-template-columns:1fr 360px;gap:14px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.dog{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);
  overflow:hidden;box-shadow:var(--shadow2);cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.dog:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(31,41,55,.10)}
.dog .photo{
  height:148px;
  position:relative;
  background:rgba(110,128,93,.10);
}
.dog .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 25%;
}
.badge{
  position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.84);border:1px solid var(--border);font-size:12px;
  backdrop-filter:blur(10px);
}

/* Share button: fixed top-right */
.dog .photo .share{
  position:absolute;
  right:12px;
  top:12px;
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.78);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  color:rgba(31,41,55,.65);
  cursor:pointer;
  z-index:5;
}
.dog .photo .share:hover{background:rgba(255,255,255,.92)}

.dog .body{padding:12px 12px 14px}
.dog .name{font-weight:900;font-size:16px;margin:0 0 4px}
.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:8px}
.pill{
  padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.74);
  border:1px solid var(--border);font-size:12px;color:rgba(31,41,55,.75);
}
.dog .desc{color:rgba(31,41,55,.75);font-size:13px;line-height:1.35;min-height:46px}
.dog .btnrow span{
  display:inline-block;margin-top:10px;padding:10px 12px;border-radius:12px;
  background:rgba(110,128,93,.14);border:1px solid var(--border);font-weight:900;font-size:13px;
}

/* sidebar */
.feature{
  position:sticky;top:16px;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
}
.feature .head{padding:14px 14px 8px;display:flex;align-items:center;justify-content:space-between}
.feature .head h3{margin:0;font-size:18px}
.iconbtn{
  width:38px;height:38px;border-radius:14px;border:1px solid var(--border);
  background:rgba(110,128,93,.10);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:rgba(31,41,55,.70);
}

/* photo block: do NOT crop in big card */
.feature .img{
  padding:0 14px 12px;
  position:relative;
  background:transparent;
}
.feature .img img{
  width:100%;
  height:260px;
  object-fit:contain;      /* ключевой фикс: НЕ режем */
  object-position:center;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
}

/* gallery thumbs */
.feature .thumbs{
  padding: 0 14px 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.feature .thumb{
  width:62px;
  height:46px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.70);
  box-shadow:0 10px 22px rgba(31,41,55,.05);
  cursor:pointer;
  padding:0;
}
.feature .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.feature .thumb.active{
  outline: 3px solid rgba(110,128,93,.35);
}

/* facts chips */
.feature .facts{padding:10px 14px 6px;display:flex;flex-wrap:wrap;gap:8px}
.fact{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.72);font-size:12px;font-weight:800;color:rgba(31,41,55,.78);
  box-shadow:0 10px 22px rgba(31,41,55,.05);
}
.fact.ok{background:rgba(110,128,93,.14)}
.fact.no{background:rgba(31,41,55,.06);font-weight:700}
.fact.tag{background:rgba(255,255,255,.78)}

.feature .text{padding:0 14px 14px;color:rgba(31,41,55,.70);font-size:13px;line-height:1.45}
.feature .cta{padding:0 14px 16px}
.feature .cta .btnbig{
  width:100%;border:none;border-radius:999px;padding:14px 16px;background:var(--g);color:#fff;
  font-weight:900;font-size:15px;box-shadow:0 14px 26px rgba(110,128,93,.25);
}

/* stories */
.storygrid{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.story{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow2)}
.story .pair{display:grid;grid-template-columns:1fr 1fr}
.story .imgbox{position:relative;height:150px;background:rgba(110,128,93,.10)}
.story .imgbox img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.story .tag{
  position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.84);border:1px solid var(--border);font-size:12px;
}
.story .body{padding:12px 12px 14px}
.story .title{margin:0 0 6px;font-weight:900;font-size:16px}
.story .text{margin:0;color:rgba(31,41,55,.72);font-size:13px;line-height:1.45}

.footer{margin:22px 0 10px;text-align:center;color:rgba(31,41,55,.55);font-size:13px}

/* responsive */
@media (max-width:1040px){
  .catalog{grid-template-columns:1fr}
  .feature{position:relative;top:auto}
  .grid{grid-template-columns:repeat(2,1fr)}
  .storygrid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.two{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:880px){
  .container{padding:14px}
  .pillbar{flex-direction:column;align-items:stretch;border-radius:28px;gap:12px}
  .nav{justify-content:center}
  .right{justify-content:space-between}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero .left{padding:22px}
  .hero h1{font-size:38px}
  .hero p{font-size:16px}
  .hero .img{min-height:260px;border-left:none;border-top:1px solid var(--border);background-position:center}
  .hero .img::after{background-position:left center, 62% 40%;background-size:auto, 320px}
  .cards{grid-template-columns:1fr}
  .cards.two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .storygrid{grid-template-columns:1fr}
}

@media (max-width:1024px) and (orientation: landscape){
  .pillbar{flex-direction:row;flex-wrap:wrap;gap:10px;border-radius:24px}
  .nav{flex:1 1 100%;justify-content:center;order:3}
  .right{order:2;margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:320px}
  .hero .left{padding:20px}
  .hero h1{font-size:36px}
  .hero p{font-size:15px}
  .hero .img{min-height:220px;border-left:none;border-top:1px solid var(--border);background-position:center}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .storygrid{grid-template-columns:repeat(2,1fr)}
  .catalog{grid-template-columns:1fr}
  .feature{position:relative;top:auto}
}

/* Mobile: compact filters with OK top-right (same row with Reset) */
@media (max-width:520px){
  .hero h1{font-size:34px}
  .btn{padding:10px 12px}

  .filters{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:stretch;
  }
  input.q{grid-column:1 / -1; width:100%}
  .select{width:100%}
  .filters .btn.primary{grid-column:2 / 3; justify-content:center}
  .filters .reset{grid-column:1 / 2; text-align:center; display:flex; justify-content:center; align-items:center}
}