/* ============= Global fonts ============= */
@font-face{font-family:'M PLUS Rounded 1c';src:url('/assets/fonts/mplus/MPLUSRounded1c-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'M PLUS Rounded 1c';src:url('/assets/fonts/mplus/MPLUSRounded1c-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'M PLUS Rounded 1c';src:url('/assets/fonts/mplus/MPLUSRounded1c-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
html,body,*{font-family:'M PLUS Rounded 1c',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
*{box-sizing:border-box}

/* ============= Theme vars (как на главной) ============= */
:root{
  --text:#0f172a;--muted:#475569;--border:#e5e7eb;--shadow:0 10px 30px rgba(2,6,23,.08);
  --bg1:#ffffff;--c1:#fff7ed;--c2:#fef3c7;--c3:#fffbeb;--brand:#d97706;--brown:#8b5e34;
  --r:18px;
  --fz-base:16px;
  --fz-menu:18px;   /* общий размер пунктов меню и свитчера на десктопе */
  --fz-btn:18px;
  --fz-h1:clamp(24px,3.4vw,30px);
  --fz-h2:clamp(24px,3.4vw,30px);
  --fz-foot:16px;
}
/* ===== Width normalization (без фикса 1262px) ===== */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Жёсткая отсечка горизонтального переполнения на мобильных/Android */
html, body{
  max-width:100%;
  overflow-x:hidden;          /* универсальный */
}
@supports (overflow: clip){
  body{ overflow-x:clip; }    /* современный вариант без влияния на позиционирование */
}

/* Перестраховка: медиаконтент никогда не раздувает строку */
img,svg,video{max-width:100%;height:auto}

/* Резервируем место под вертикальный скролл БЕЗ левого жёлоба */
@supports (scrollbar-gutter: stable) {
  html{ scrollbar-gutter: stable; }  /* без both-edges */
}

/* Всегда держим вертикальный скролл включённым — и для Safari тоже */
html, body{ overflow-y: scroll !important; }
/* Жёсткая отсечка горизонтального переполнения */
html, body{ max-width:100%; overflow-x:hidden; }
@supports (overflow: clip){
  body{ overflow-x:clip; }
}
/* Медиа не раздувает строку */
img,svg,video{ max-width:100%; height:auto; }

/* ============= Body + container ============= */
body{
  margin:0;color:var(--text);line-height:1.65;font-size:var(--fz-base);
  background:
    radial-gradient(900px 600px at 120% -10%,var(--c2),transparent),
    radial-gradient(900px 600px at 0% -10%,var(--c3),transparent),
    radial-gradient(900px 600px at 50% 120%,var(--c1),transparent),var(--bg1);
}
a{text-decoration:none;color:inherit}
.container{max-width:1180px;margin:0 auto;padding:24px}

/* ============= Header (как на index) ============= */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border)
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px}
.left{display:flex;align-items:center;gap:14px}
/* Desktop: стабилизируем языковую плашку справа */
@media (min-width:641px){
  .lang{
    margin-left:auto;        /* прижать вправо */
    min-width: 240px;        /* хватит под 3–4 кнопки без «дыхания» */
    justify-content:space-between;
  }
}
.logo{width:80px;height:80px;border-radius:50%;box-shadow:var(--shadow)}
@media (max-width:640px){.logo{width:56px;height:56px}}
.brand-img{height:48px;width:auto;display:block}
@media (max-width:640px){.brand-img{height:36px}}

/* Меню */
.menu{display:flex;align-items:center;gap:18px}
.menu a{
  padding:10px 0;border-radius:10px;font-size:var(--fz-menu);
  font-weight:500;color:#111827;white-space:nowrap
}
.menu a:hover{background:#f8fafc}
.menu a + a::before{content:"|";color:#c7b9a7;margin:0 10px;font-weight:400}

/* ============= Языковой свитчер (каноничный) ============= */
.lang{
  display:flex;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:999px;padding:6px;box-shadow:var(--shadow)
}
/* НИКАКИХ width/height! Только паддинги, как на главной */
.lang button{
  border:0;background:transparent;padding:8px 14px;border-radius:999px;
  font-size:var(--fz-menu);font-weight:500;color:#6b7280;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .05s ease
}
.lang button.active{background:linear-gradient(135deg,var(--brand),var(--brown));color:#fff}
.lang button:hover{transform:translateY(-1px)}
.lang button:focus{outline:3px solid #fde68a;outline-offset:2px}

/* ===== Mobile header layout (≤640px) ===== */
@media (max-width:640px){
  .nav{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "logo     wordmark   lang"
      "menu     menu       menu";
    align-items:center;column-gap:10px;row-gap:8px;
  }
  .left{display:contents}
  .logo{grid-area:logo;justify-self:start}
  .brand-img{grid-area:wordmark;justify-self:start;align-self:center;max-width:140px;height:36px;width:auto}
  .lang{grid-area:lang;justify-self:end;padding:4px;gap:3px}
  .lang button{width:auto;height:auto;padding:6px 10px;font-size:14px;line-height:normal}
  .menu{grid-area:menu;justify-content:center;gap:6px;flex-wrap:nowrap}
  .menu a{padding:8px 6px}
  .menu a + a::before{margin:0 6px}

  /* динамический кегль пунктов меню по языкам (как на index) */
  html[data-lang="en"] .menu a{font-size:clamp(13.5px,4.2vw,18px)}
  html[data-lang="ua"] .menu a,
  html[data-lang="ru"] .menu a{font-size:clamp(11px,3.4vw,16px)}
  /* добавили аккуратную ветку для DE (между EN и UA/RU) */
  html[data-lang="de"] .menu a{font-size:clamp(12.5px,3.8vw,17px)}

  @media (max-width:390px){
    html[data-lang="ua"] .menu a,
    html[data-lang="ru"] .menu a{font-size:clamp(10.5px,3.2vw,15px)}
    html[data-lang="de"] .menu a{font-size:clamp(11.5px,3.4vw,16px)}
  }
}

/* ============= Banner + socials (как на index) ============= */
.banner{margin:12px 0 0;border:2px dashed #d97706;background:#fff7ed;color:#8b5e34;padding:12px 14px;border-radius:14px}
.banner-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.socials{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-left:12px}
.iconbtn{
  width:45px;height:45px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:#fff;border:2px solid #d6d3d1;box-shadow:var(--shadow);color:#8b5e34;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.iconbtn svg{width:26px;height:26px}
.iconbtn:hover{background:#eddcc2;border-color:#bfae9b;color:#6f4a22}
@media (max-width:640px){
  .banner-row{flex-direction:column;text-align:center}
  .socials{justify-content:center;margin-left:0;gap:10px}
  .iconbtn{width:36px;height:36px}
  .iconbtn svg{width:22px;height:22px}
}

/* ============= Common content blocks ============= */
.section{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow);margin:16px 0}
h1{font-size:var(--fz-h1);font-weight:800;margin:8px 0}
h2{font-size:var(--fz-h2);font-weight:800;margin:8px 0}
.lead{color:var(--muted);font-weight:500}

/* Кнопки */
.btn,.buybtn,.tabbtn,
#pab-seeall{
  display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;
  font-weight:800;font-size:var(--fz-btn);color:#fff;background:linear-gradient(135deg,var(--brand),var(--brown));
  box-shadow:var(--shadow);border:0;text-decoration:none;white-space:nowrap
}
.btn:hover,.buybtn:hover,.tabbtn:hover,#pab-seeall:hover{
  background:linear-gradient(135deg,#f59e0b,#a47147);transform:translateY(-1px);
  transition:background .15s ease, transform .05s ease
}

/* Пилюли (например .COM/.DE/.UK) */
.pill{display:inline-block;text-align:center;min-width:70px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff;font-weight:800;transition:background .15s ease,border-color .15s ease,color .15s ease}
.pill-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pill:hover{background:#eddcc2;border-color:#bfae9b;color:#6f4a22}

/* Footer */
.footer, footer{padding:26px;text-align:center;color:#6b7280;font-size:var(--fz-foot);font-weight:500}
.footer a, footer a{color:#6b7280;text-decoration:none;margin:0 4px;font-weight:500}
.footer a:hover, footer a:hover{color:#8b5e34}

/* Helpers */
.card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);padding:22px 22px 22px 28px}
.pad{padding:16px}
.badge{display:inline-block;padding:4px 10px;border:1px solid #e0e7ff;background:#eef2ff;color:#3730a3;border-radius:999px;font-size:14px;font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:960px){.grid2{grid-template-columns:1fr}}
/* Mail link style */
a[href^="mailto:"]{color:#2563eb;text-decoration:underline}
a[href^="mailto:"]:hover{color:#1d4ed8}
/* See all — как на главной, жёстко одинаковая */
#t-body .btn-seeall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  /* на главной размер задаётся паддингами и var(--fz-btn) — оставляем их */
  padding:14px 18px;
  border-radius:14px;
  font-weight:800;
  font-size:var(--fz-btn);   /* как на главной */
  line-height:normal;
  white-space:nowrap;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brown));
  box-shadow:var(--shadow);
  border:0;
  text-decoration:none;

  /* фиксируем реальные габариты под главную */
  width:180px !important;    /* было 140 — ставим как на главной по виду */
  height:48px !important;    /* главная визуально выше */
  box-sizing:border-box;     /* чтобы паддинги не раздували габарит */
}

#t-body .btn-seeall:hover{
  background:linear-gradient(135deg,#f59e0b,#a47147);
  transition:background .15s ease, transform .05s ease;
  transform:translateY(-1px);
}
/* ==== Parents also buy: подгон под главную ==== */

/* Ряд заголовок + кнопка */
#t-body .ab-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;                   /* безопасный зазор */
}

/* Заголовок: фикс высота 49px под твоё измерение */
#t-body .ab-head h2{
  margin:0;
  font-weight:800;
  font-size:34px;             /* подгоняем размер, чтобы набрать 49px по высоте */
  line-height:49px;           /* фиксированная высота строки */
  height:49px;                /* жёстко цементируем 49px */
}

/* Кнопка See all: 129×55px, как на главной (по твоим замерам) */
#t-body .ab-head .btn-seeall{
  flex:0 0 129px;             /* запрещаем сжатие, ширина ровно 129 */
  width:129px !important;
  min-width:129px !important;
  height:55px !important;     /* точно 55 по высоте */
  box-sizing:border-box;
  font-weight:800;
  font-size:18px;             /* как на главной «по глазам» */
  padding:0 18px;             /* вертикаль берём из height, а не из padding */
  border-radius:14px;
  display:inline-flex;
  align-items:center;         /* выравнивание текста по вертикали */
  justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brown));
  color:#fff;
  text-decoration:none;
  border:0;
  box-shadow:var(--shadow);
}

/* Ховер — только цвет, без изменения размеров/позиции */
#t-body .ab-head .btn-seeall:hover{
  background:linear-gradient(135deg,#f59e0b,#a47147);
  transition:background .15s ease;
}