/* ---- Розведення спирту водою (sv) — зі сторінки /calculator/spirt-voda ---- */
.pervak-spirt-voda,
.pervak-spirt-voda *,
.pervak-spirt-voda h1,
.pervak-spirt-voda h2,
.pervak-spirt-voda h3,
.pervak-spirt-voda p,
.pervak-spirt-voda a,
.pervak-spirt-voda span,
.pervak-spirt-voda li,
.pervak-spirt-voda td,
.pervak-spirt-voda th,
.pervak-spirt-voda summary,
.pervak-spirt-voda details,
.pervak-spirt-voda strong,
.pervak-spirt-voda button,
.pervak-spirt-voda input,
.pervak-spirt-voda label,
.pervak-spirt-voda select,
.pervak-spirt-voda small,
.pervak-spirt-voda code {
font-family: 'DIN Pro', 'DINPro', 'DINPro-Regular', 'DINPro-Medium', 'DINPro-Bold', sans-serif !important;
box-sizing: border-box;
}

.pervak-spirt-voda {
--black: #111111;
--white: #ffffff;
--red: #ed252e;
--line: #e4e4e4;
--muted: #5f5f5f;
--soft: #f7f7f7;
color: var(--black);
background: var(--white);
max-width: 1160px;
margin: 0 auto;
padding: 0 20px 56px;
font-size: 18px;
line-height: 1.45;
}

.pervak-spirt-voda a {
color: inherit;
text-decoration: none;
}

.pervak-spirt-voda p,
.pervak-spirt-voda ul {
margin: 0;
}

.sv-section {
padding: 48px 0;
border-bottom: 1px solid var(--line);
}

.sv-hero {
padding: 16px 0 44px;
border-bottom: 1px solid var(--line);
}

.sv-title {
max-width: 980px;
margin: 0 0 20px;
font-size: clamp(44px, 7vw, 86px);
line-height: 0.95;
letter-spacing: -0.055em;
font-weight: 800;
color: var(--black);
}

.sv-lead {
max-width: 820px;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.35;
color: var(--black);
}

.sv-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}

.sv-actions-small {
margin-top: 16px;
}

.sv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 15px 24px 14px;
border: 2px solid var(--black);
background: var(--black);
color: var(--white) !important;
font-weight: 700;
line-height: 1;
transition: .18s ease;
cursor: pointer;
}

.sv-btn:hover {
background: var(--white);
color: var(--black) !important;
}

.sv-btn-red {
border-color: var(--red);
background: var(--red);
color: var(--white) !important;
}

.sv-btn-red:hover {
background: var(--white);
color: var(--red) !important;
}

.sv-btn-outline {
background: var(--white);
color: var(--black) !important;
}

.sv-btn-outline:hover {
background: var(--black);
color: var(--white) !important;
}

.sv-head {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: 48px;
align-items: end;
margin-bottom: 28px;
}

.sv-head h2,
.sv-copy h2,
.sv-cta h2 {
margin: 0;
font-size: clamp(36px, 4.8vw, 64px);
line-height: 0.98;
letter-spacing: -0.045em;
font-weight: 800;
color: var(--black);
}

.sv-head p,
.sv-copy p,
.sv-cta p {
max-width: 720px;
color: var(--muted);
font-size: 20px;
line-height: 1.45;
}

.sv-calc {
border: 1px solid var(--black);
padding: 28px;
background: var(--white);
}

.sv-presets {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}

.sv-preset {
border: 1px solid var(--line);
background: var(--soft);
color: var(--black);
padding: 10px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: .18s ease;
}

.sv-preset:hover {
border-color: var(--black);
background: var(--white);
}

.sv-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
align-items: start;
}

.sv-field {
display: grid;
gap: 8px;
min-width: 0;
}

.sv-field label {
font-weight: 800;
font-size: 18px;
color: var(--black);
}

.sv-field input,
.sv-field select {
min-height: 54px;
padding: 14px 16px;
border: 1px solid var(--line);
background: var(--white);
color: var(--black);
font: inherit;
outline: none;
width: 100%;
min-width: 0;
max-width: 100%;
}

.sv-field input:focus,
.sv-field select:focus {
border-color: var(--black);
}

.sv-field small {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}

.sv-field-wide {
grid-column: 1 / -1;
}

.sv-checkbox-row {
display: flex;
align-items: center;
gap: 10px;
}

.sv-checkbox-row input[type="checkbox"] {
width: 20px;
height: 20px;
min-height: 0;
flex-shrink: 0;
accent-color: var(--black);
}

.sv-checkbox-row label {
font-weight: 700;
font-size: 15px;
color: var(--black);
}

.sv-calc-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}

.sv-error {
margin-top: 18px;
color: var(--red);
font-weight: 700;
font-size: 16px;
}

.sv-result {
margin-top: 24px;
padding: 24px;
border: 1px solid var(--black);
background: var(--soft);
}

.sv-result-tag {
margin: 0 0 8px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--red);
}

.sv-result-main {
margin: 0 0 20px;
font-size: 22px;
line-height: 1.35;
font-weight: 700;
color: var(--black);
}

.sv-result-main strong {
font-weight: 800;
}

.sv-specs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}

.sv-spec {
border: 1px solid var(--black);
background: var(--white);
padding: 10px 14px;
font-size: 15px;
font-weight: 700;
}

.sv-spec small {
display: block;
margin-top: 2px;
font-weight: 400;
color: var(--muted);
font-size: 12px;
}

.sv-explain {
margin-top: 4px;
padding-top: 18px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}

.sv-explain p {
margin: 0 0 10px;
}

.sv-explain p:last-child {
margin-bottom: 0;
}

.sv-contraction {
margin-top: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
background: var(--white);
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}

.sv-copy {
max-width: 920px;
}

.sv-copy p {
margin: 0 0 16px;
font-size: 20px;
line-height: 1.5;
color: var(--black);
}

.sv-copy ul,
.sv-copy ol {
padding-left: 22px;
margin-top: 6px;
}

.sv-copy li {
margin-bottom: 10px;
color: var(--black);
}

.sv-copy a,
.sv-faq a,
.sv-links a {
color: var(--black);
font-weight: 800;
border-bottom: 2px solid var(--red);
}

.sv-copy a:hover,
.sv-faq a:hover {
color: var(--red);
}

.sv-formula {
display: block;
margin: 10px 0 12px;
padding: 14px 18px;
border: 1px solid var(--black);
background: var(--soft);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
}

.sv-example {
border: 1px solid var(--black);
background: var(--soft);
padding: 22px 24px;
}

.sv-example p {
font-size: 17px;
margin: 0 0 8px;
}

.sv-example p:last-child {
margin-bottom: 0;
}

.sv-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--black);
border-left: 1px solid var(--black);
}

.sv-card {
min-height: 220px;
padding: 28px 24px;
border-right: 1px solid var(--black);
border-bottom: 1px solid var(--black);
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--white);
transition: .18s ease;
}

.sv-card:hover {
background: var(--black);
color: var(--white);
}

.sv-card h3 {
margin: 0 0 14px;
font-size: 24px;
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
}

.sv-card p {
color: inherit;
opacity: .82;
font-size: 16px;
line-height: 1.4;
}

.sv-card span {
display: inline-block;
margin-top: 24px;
color: inherit;
font-weight: 800;
font-size: 16px;
}

.sv-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.sv-links a {
padding: 12px 16px 11px;
border: 1px solid var(--black);
font-weight: 800;
line-height: 1;
}

.sv-links a:hover {
background: var(--black);
color: var(--white);
}

.sv-faq {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--black);
}

.sv-faq details {
border-bottom: 1px solid var(--line);
padding: 0;
}

.sv-faq summary {
cursor: pointer;
list-style: none;
padding: 22px 0;
font-size: 22px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.015em;
}

.sv-faq summary::-webkit-details-marker {
display: none;
}

.sv-faq details summary::after {
content: '+';
float: right;
font-size: 28px;
line-height: 1;
color: var(--red);
margin-left: 20px;
}

.sv-faq details[open] summary::after {
content: '–';
}

.sv-faq details p {
max-width: 820px;
padding: 0 0 22px;
color: var(--muted);
font-size: 18px;
line-height: 1.45;
}

.sv-note {
max-width: 900px;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}

@media (max-width: 1024px) {
.sv-head {
grid-template-columns: 1fr;
gap: 18px;
}

.sv-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
} }

@media (max-width: 560px) {
.sv-form {
grid-template-columns: 1fr;
} }

@media (max-width: 640px) {
.pervak-spirt-voda {
font-size: 16px;
padding: 0 16px 56px;
}

.sv-section {
padding: 36px 0;
}

.sv-hero {
padding: 8px 0 34px;
}

.sv-title {
font-size: 46px;
}

.sv-lead,
.sv-head p,
.sv-copy p,
.sv-cta p {
font-size: 18px;
}

.sv-actions,
.sv-calc-actions {
flex-direction: column;
align-items: stretch;
}

.sv-btn {
width: 100%;
}

.sv-grid {
grid-template-columns: 1fr;
}

.sv-card {
min-height: auto;
}

.sv-formula {
font-size: 15px;
word-break: break-word;
} }

/* ЗАХИСНИЙ RESET — перебиває успадковані стилі теми/CMS-конструктора
(position:absolute/float для label тощо), які можуть ламати мобільну верстку. */
.pervak-spirt-voda,
.pervak-spirt-voda * {
position: static;
float: none;
top: auto;
left: auto;
right: auto;
bottom: auto;
}

.pervak-spirt-voda .sv-field {
min-width: 0;
}

.pervak-spirt-voda .sv-field label,
.pervak-spirt-voda .sv-field select,
.pervak-spirt-voda .sv-field input {
width: 100%;
min-width: 0;
max-width: 100%;
}

.pervak-spirt-voda .sv-checkbox-row input[type="checkbox"] {
width: 20px;
}

/* ---- Брага на турбодріжджах (pb) — зі сторінки /calculator/braga ---- */
.pervak-braga,
.pervak-braga *,
.pervak-braga h1,
.pervak-braga h2,
.pervak-braga h3,
.pervak-braga p,
.pervak-braga a,
.pervak-braga span,
.pervak-braga li,
.pervak-braga td,
.pervak-braga th,
.pervak-braga summary,
.pervak-braga details,
.pervak-braga strong,
.pervak-braga button,
.pervak-braga input,
.pervak-braga label,
.pervak-braga select,
.pervak-braga small,
.pervak-braga code {
  font-family: 'DIN Pro', 'DINPro', 'DINPro-Regular', 'DINPro-Medium', 'DINPro-Bold', sans-serif !important;
  box-sizing: border-box;
}

.pervak-braga {
  --black: #111111;
  --white: #ffffff;
  --red: #ed252e;
  --line: #e4e4e4;
  --muted: #5f5f5f;
  --soft: #f7f7f7;
  color: var(--black);
  background: var(--white);
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px 56px;
  font-size: 18px;
  line-height: 1.45;
}

.pervak-braga a {
  color: inherit;
  text-decoration: none;
}

.pervak-braga p,
.pervak-braga ul {
  margin: 0;
}

.pb-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.pb-hero {
  padding: 16px 0 44px;
  border-bottom: 1px solid var(--line);
}

.pb-title {
  max-width: 980px;
  margin: 0 0 20px;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-weight: 800;
  color: var(--black);
}

.pb-lead {
  max-width: 840px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  color: var(--black);
}

.pb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.pb-actions-small {
  margin-top: 16px;
}

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 24px 14px;
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--white) !important;
  font-weight: 700;
  line-height: 1;
  transition: .18s ease;
  cursor: pointer;
}

.pb-btn:hover {
  background: var(--white);
  color: var(--black) !important;
}

.pb-btn-red {
  border-color: var(--red);
  background: var(--red);
  color: var(--white) !important;
}

.pb-btn-red:hover {
  background: var(--white);
  color: var(--red) !important;
}

.pb-btn-outline {
  background: var(--white);
  color: var(--black) !important;
}

.pb-btn-outline:hover {
  background: var(--black);
  color: var(--white) !important;
}

.pb-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 28px;
}

.pb-head h2,
.pb-copy h2,
.pb-cta h2 {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--black);
}

.pb-head p,
.pb-copy p,
.pb-cta p {
  max-width: 720px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}

.pb-calc {
  border: 1px solid var(--black);
  padding: 28px;
  background: var(--white);
}

/* ФІКС: було repeat(3, minmax(0, 1fr)) — коли поле recipeMode приховане
   (тип браги ≠ Fruit and Jam), у сітці лишалась порожня третя колонка
   і форма виглядала перекошеною праворуч. auto-fit сам рахує кількість
   реально видимих полів (2 або 3) і ділить простір рівно між ними. */
.pb-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: start;
}

.pb-field {
  display: grid;
  gap: 8px;
}

.pb-field label {
  font-weight: 800;
  font-size: 18px;
  color: var(--black);
}

.pb-field input,
.pb-field select {
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--black);
  font: inherit;
  outline: none;
}

.pb-field input:focus,
.pb-field select:focus {
  border-color: var(--black);
}

.pb-field small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.pb-field-wide {
  grid-column: 1 / -1;
}

.pb-hidden {
  display: none;
}

.pb-calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.pb-error {
  margin-top: 18px;
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
}

.pb-result {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--black);
  background: var(--soft);
}

.pb-result strong {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.2;
  color: var(--black);
}

.pb-result p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.pb-result p:last-child {
  margin-bottom: 0;
}

.pb-copy {
  max-width: 920px;
}

.pb-copy p {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--black);
}

.pb-copy ul {
  padding-left: 22px;
  margin-top: 6px;
}

.pb-copy li {
  margin-bottom: 10px;
  color: var(--black);
}

.pb-copy a,
.pb-faq a,
.pb-links a {
  color: var(--black);
}

.pb-copy a,
.pb-faq a {
  font-weight: 800;
  border-bottom: 2px solid var(--red);
}

.pb-copy a:hover,
.pb-faq a:hover {
  color: var(--red);
}

.pb-logic {
  display: block;
  margin: 10px 0 12px;
  padding: 14px 18px;
  border: 1px solid var(--black);
  background: var(--soft);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--black);
  border-left: 1px solid var(--black);
}

.pb-card {
  min-height: 250px;
  padding: 28px 24px;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--white);
  transition: .18s ease;
}

.pb-card:hover {
  background: var(--black);
  color: var(--white);
}

.pb-card h3 {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.pb-card p {
  color: inherit;
  opacity: .82;
  font-size: 17px;
  line-height: 1.4;
}

.pb-card span {
  display: inline-block;
  margin-top: 24px;
  color: inherit;
  font-weight: 800;
  font-size: 16px;
}

.pb-cta {
  border: 1px solid var(--black);
  padding: 28px;
  background: var(--white);
}

.pb-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pb-links a {
  padding: 12px 16px 11px;
  border: 1px solid var(--black);
  font-weight: 800;
  line-height: 1;
}

.pb-links a:hover {
  background: var(--black);
  color: var(--white);
}

.pb-faq {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--black);
}

.pb-faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.pb-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.pb-faq summary::-webkit-details-marker {
  display: none;
}

.pb-faq details summary::after {
  content: '+';
  float: right;
  font-size: 28px;
  line-height: 1;
  color: var(--red);
  margin-left: 20px;
}

.pb-faq details[open] summary::after {
  content: '–';
}

.pb-faq details p {
  max-width: 820px;
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.pb-note {
  max-width: 920px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .pb-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ФІКС: старий @media (max-width:768px) { .pb-form{grid-template-columns:1fr} }
   видалено — він форсував 1 колонку вже на планшетах, хоча 2 поля вільно
   вміщаються поруч. auto-fit у .pb-form сам розрулює це без брейкпоінта.
   Залишаємо лише вузький мобільний запобіжник: */
@media (max-width: 560px) {
  .pb-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pervak-braga {
    font-size: 16px;
    padding: 0 16px 56px;
  }

  .pb-section {
    padding: 36px 0;
  }

  .pb-hero {
    padding: 8px 0 34px;
  }

  .pb-title {
    font-size: 46px;
  }

  .pb-lead,
  .pb-head p,
  .pb-copy p,
  .pb-cta p {
    font-size: 18px;
  }

  .pb-actions,
  .pb-calc-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pb-btn {
    width: 100%;
  }

  .pb-grid {
    grid-template-columns: 1fr;
  }

  .pb-card {
    min-height: auto;
  }

  .pb-logic {
    font-size: 17px;
  }
}

/* ЗАХИСНИЙ RESET — перебиває успадковані стилі теми/CMS-конструктора
   (типово: position:absolute або float для label/select у "плаваючих"
   формах), які можуть спричиняти накладання тексту одне на одне. */
.pervak-braga,
.pervak-braga * {
  position: static;
  float: none;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}

.pervak-braga .pb-field {
  min-width: 0;
}

.pervak-braga .pb-field label,
.pervak-braga .pb-field select,
.pervak-braga .pb-field input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* ---- Параметри цукрової браги (tb) — зі сторінки /calculator/tsukrova-braga ---- */
.pervak-tsukrova-braga,
.pervak-tsukrova-braga *,
.pervak-tsukrova-braga h1,
.pervak-tsukrova-braga h2,
.pervak-tsukrova-braga h3,
.pervak-tsukrova-braga p,
.pervak-tsukrova-braga a,
.pervak-tsukrova-braga span,
.pervak-tsukrova-braga li,
.pervak-tsukrova-braga td,
.pervak-tsukrova-braga th,
.pervak-tsukrova-braga summary,
.pervak-tsukrova-braga details,
.pervak-tsukrova-braga strong,
.pervak-tsukrova-braga button,
.pervak-tsukrova-braga input,
.pervak-tsukrova-braga label,
.pervak-tsukrova-braga select,
.pervak-tsukrova-braga small,
.pervak-tsukrova-braga code {
font-family: 'DIN Pro', 'DINPro', 'DINPro-Regular', 'DINPro-Medium', 'DINPro-Bold', sans-serif !important;
box-sizing: border-box;
}

.pervak-tsukrova-braga {
--black: #111111;
--white: #ffffff;
--red: #ed252e;
--line: #e4e4e4;
--muted: #5f5f5f;
--soft: #f7f7f7;
color: var(--black);
background: var(--white);
max-width: 1160px;
margin: 0 auto;
padding: 0 20px 56px;
font-size: 18px;
line-height: 1.45;
}

.pervak-tsukrova-braga a {
color: inherit;
text-decoration: none;
}

.pervak-tsukrova-braga p,
.pervak-tsukrova-braga ul {
margin: 0;
}

.tb-section {
padding: 48px 0;
border-bottom: 1px solid var(--line);
}

.tb-hero {
padding: 16px 0 44px;
border-bottom: 1px solid var(--line);
}

.tb-title {
max-width: 980px;
margin: 0 0 20px;
font-size: clamp(44px, 7vw, 86px);
line-height: 0.95;
letter-spacing: -0.055em;
font-weight: 800;
color: var(--black);
}

.tb-lead {
max-width: 820px;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.35;
color: var(--black);
}

.tb-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}

.tb-actions-small {
margin-top: 16px;
}

.tb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 15px 24px 14px;
border: 2px solid var(--black);
background: var(--black);
color: var(--white) !important;
font-weight: 700;
line-height: 1;
transition: .18s ease;
cursor: pointer;
}

.tb-btn:hover {
background: var(--white);
color: var(--black) !important;
}

.tb-btn-red {
border-color: var(--red);
background: var(--red);
color: var(--white) !important;
}

.tb-btn-red:hover {
background: var(--white);
color: var(--red) !important;
}

.tb-btn-outline {
background: var(--white);
color: var(--black) !important;
}

.tb-btn-outline:hover {
background: var(--black);
color: var(--white) !important;
}

.tb-head {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: 48px;
align-items: end;
margin-bottom: 28px;
}

.tb-head h2,
.tb-copy h2,
.tb-cta h2 {
margin: 0;
font-size: clamp(36px, 4.8vw, 64px);
line-height: 0.98;
letter-spacing: -0.045em;
font-weight: 800;
color: var(--black);
}

.tb-head p,
.tb-copy p,
.tb-cta p {
max-width: 720px;
color: var(--muted);
font-size: 20px;
line-height: 1.45;
}

.tb-calc {
border: 1px solid var(--black);
padding: 28px;
background: var(--white);
}

.tb-presets {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}

.tb-preset {
border: 1px solid var(--line);
background: var(--soft);
color: var(--black);
padding: 10px 14px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: .18s ease;
}

.tb-preset:hover {
border-color: var(--black);
background: var(--white);
}

.tb-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
align-items: start;
}

.tb-field {
display: grid;
gap: 8px;
min-width: 0;
}

.tb-field label {
font-weight: 800;
font-size: 18px;
color: var(--black);
}

.tb-field input,
.tb-field select {
min-height: 54px;
padding: 14px 16px;
border: 1px solid var(--line);
background: var(--white);
color: var(--black);
font: inherit;
outline: none;
width: 100%;
min-width: 0;
max-width: 100%;
}

.tb-field input:focus,
.tb-field select:focus {
border-color: var(--black);
}

.tb-field small {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}

.tb-field-wide {
grid-column: 1 / -1;
}

.tb-calc-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}

.tb-error {
margin-top: 18px;
color: var(--red);
font-weight: 700;
font-size: 16px;
}

.tb-result {
margin-top: 24px;
padding: 24px;
border: 1px solid var(--black);
background: var(--soft);
}

.tb-result-tag {
margin: 0 0 8px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--red);
}

.tb-result-main {
margin: 0 0 4px;
font-size: 40px;
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 800;
color: var(--black);
}

.tb-result-sub {
margin: 0 0 18px;
color: var(--muted);
font-size: 16px;
}

.tb-specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}

.tb-spec {
border: 1px solid var(--black);
background: var(--white);
padding: 6px 12px;
font-size: 13px;
font-weight: 700;
}

.tb-warning {
margin-bottom: 18px;
padding: 14px 16px;
border: 1px solid var(--red);
background: var(--white);
color: var(--red);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}

.tb-explain {
margin-top: 4px;
padding-top: 18px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}

.tb-explain p {
margin: 0 0 10px;
}

.tb-explain p:last-child {
margin-bottom: 0;
}

.tb-copy {
max-width: 920px;
}

.tb-copy p {
margin: 0 0 16px;
font-size: 20px;
line-height: 1.5;
color: var(--black);
}

.tb-copy ul,
.tb-copy ol {
padding-left: 22px;
margin-top: 6px;
}

.tb-copy li {
margin-bottom: 10px;
color: var(--black);
}

.tb-copy a,
.tb-faq a,
.tb-links a {
color: var(--black);
font-weight: 800;
border-bottom: 2px solid var(--red);
}

.tb-copy a:hover,
.tb-faq a:hover {
color: var(--red);
}

.tb-formula {
display: block;
margin: 10px 0 12px;
padding: 14px 18px;
border: 1px solid var(--black);
background: var(--soft);
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
}

.tb-example {
border: 1px solid var(--black);
background: var(--soft);
padding: 22px 24px;
}

.tb-example p {
font-size: 17px;
margin: 0 0 8px;
}

.tb-example p:last-child {
margin-bottom: 0;
}

.tb-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--black);
border-left: 1px solid var(--black);
}

.tb-card {
min-height: 220px;
padding: 28px 24px;
border-right: 1px solid var(--black);
border-bottom: 1px solid var(--black);
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--white);
transition: .18s ease;
}

.tb-card:hover {
background: var(--black);
color: var(--white);
}

.tb-card h3 {
margin: 0 0 14px;
font-size: 24px;
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
}

.tb-card p {
color: inherit;
opacity: .82;
font-size: 16px;
line-height: 1.4;
}

.tb-card span {
display: inline-block;
margin-top: 24px;
color: inherit;
font-weight: 800;
font-size: 16px;
}

.tb-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.tb-links a {
padding: 12px 16px 11px;
border: 1px solid var(--black);
font-weight: 800;
line-height: 1;
}

.tb-links a:hover {
background: var(--black);
color: var(--white);
}

.tb-faq {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--black);
}

.tb-faq details {
border-bottom: 1px solid var(--line);
padding: 0;
}

.tb-faq summary {
cursor: pointer;
list-style: none;
padding: 22px 0;
font-size: 22px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.015em;
}

.tb-faq summary::-webkit-details-marker {
display: none;
}

.tb-faq details summary::after {
content: '+';
float: right;
font-size: 28px;
line-height: 1;
color: var(--red);
margin-left: 20px;
}

.tb-faq details[open] summary::after {
content: '–';
}

.tb-faq details p {
max-width: 820px;
padding: 0 0 22px;
color: var(--muted);
font-size: 18px;
line-height: 1.45;
}

.tb-note {
max-width: 900px;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}

@media (max-width: 1024px) {
.tb-head {
grid-template-columns: 1fr;
gap: 18px;
}

.tb-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
} }

@media (max-width: 560px) {
.tb-form {
grid-template-columns: 1fr;
} }

@media (max-width: 640px) {
.pervak-tsukrova-braga {
font-size: 16px;
padding: 0 16px 56px;
}

.tb-section {
padding: 36px 0;
}

.tb-hero {
padding: 8px 0 34px;
}

.tb-title {
font-size: 46px;
}

.tb-lead,
.tb-head p,
.tb-copy p,
.tb-cta p {
font-size: 18px;
}

.tb-actions,
.tb-calc-actions {
flex-direction: column;
align-items: stretch;
}

.tb-btn {
width: 100%;
}

.tb-grid {
grid-template-columns: 1fr;
}

.tb-card {
min-height: auto;
}

.tb-result-main {
font-size: 30px;
}

.tb-formula {
font-size: 15px;
word-break: break-word;
} }

/* ЗАХИСНИЙ RESET — перебиває успадковані стилі теми/CMS-конструктора
(position:absolute/float для label тощо), які можуть ламати мобільну верстку. */
.pervak-tsukrova-braga,
.pervak-tsukrova-braga * {
position: static;
float: none;
top: auto;
left: auto;
right: auto;
bottom: auto;
}

.pervak-tsukrova-braga .tb-field {
min-width: 0;
}

.pervak-tsukrova-braga .tb-field label,
.pervak-tsukrova-braga .tb-field select,
.pervak-tsukrova-braga .tb-field input {
width: 100%;
min-width: 0;
max-width: 100%;
}

/* ---- Відбір голів і хвостів (pg) — зі сторінки /calculator/golovi-hvosti ---- */
.pervak-golovi,
.pervak-golovi *,
.pervak-golovi h1,
.pervak-golovi h2,
.pervak-golovi h3,
.pervak-golovi p,
.pervak-golovi a,
.pervak-golovi span,
.pervak-golovi li,
.pervak-golovi td,
.pervak-golovi th,
.pervak-golovi summary,
.pervak-golovi details,
.pervak-golovi strong,
.pervak-golovi button,
.pervak-golovi input,
.pervak-golovi label,
.pervak-golovi small,
.pervak-golovi code {
font-family: 'DIN Pro', 'DINPro', 'DINPro-Regular', 'DINPro-Medium', 'DINPro-Bold', sans-serif !important;
box-sizing: border-box;
}

.pervak-golovi {
--black: #111111;
--white: #ffffff;
--red: #ed252e;
--line: #e4e4e4;
--muted: #5f5f5f;
--soft: #f7f7f7;
color: var(--black);
background: var(--white);
max-width: 1160px;
margin: 0 auto;
padding: 0 20px 56px;
font-size: 18px;
line-height: 1.45;
}

.pervak-golovi a {
color: inherit;
text-decoration: none;
}

.pervak-golovi p,
.pervak-golovi ul {
margin: 0;
}

.pg-section {
padding: 48px 0;
border-bottom: 1px solid var(--line);
}

.pg-hero {
padding: 16px 0 44px;
border-bottom: 1px solid var(--line);
}

.pg-title {
max-width: 980px;
margin: 0 0 20px;
font-size: clamp(44px, 7vw, 86px);
line-height: 0.95;
letter-spacing: -0.055em;
font-weight: 800;
color: var(--black);
}

.pg-lead {
max-width: 880px;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.35;
color: var(--black);
}

.pg-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}

.pg-actions-small {
margin-top: 16px;
}

.pg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 15px 24px 14px;
border: 2px solid var(--black);
background: var(--black);
color: var(--white) !important;
font-weight: 700;
line-height: 1;
transition: .18s ease;
cursor: pointer;
}

.pg-btn:hover {
background: var(--white);
color: var(--black) !important;
}

.pg-btn-red {
border-color: var(--red);
background: var(--red);
color: var(--white) !important;
}

.pg-btn-red:hover {
background: var(--white);
color: var(--red) !important;
}

.pg-btn-outline {
background: var(--white);
color: var(--black) !important;
}

.pg-btn-outline:hover {
background: var(--black);
color: var(--white) !important;
}

.pg-head {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: 48px;
align-items: end;
margin-bottom: 28px;
}

.pg-head h2,
.pg-copy h2,
.pg-cta h2 {
margin: 0;
font-size: clamp(36px, 4.8vw, 64px);
line-height: 0.98;
letter-spacing: -0.045em;
font-weight: 800;
color: var(--black);
}

.pg-head p,
.pg-copy p,
.pg-cta p {
max-width: 720px;
color: var(--muted);
font-size: 20px;
line-height: 1.45;
}

.pg-calc {
border: 1px solid var(--black);
padding: 28px;
background: var(--white);
}

.pg-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.pg-field {
display: grid;
gap: 8px;
}

.pg-field label {
font-weight: 800;
font-size: 18px;
color: var(--black);
}

.pg-field input {
min-height: 54px;
padding: 14px 16px;
border: 1px solid var(--line);
background: var(--white);
color: var(--black);
font: inherit;
outline: none;
}

.pg-field input:focus {
border-color: var(--black);
}

.pg-field small {
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}

.pg-field-wide {
grid-column: 1 / -1;
}

.pg-calc-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}

.pg-error {
margin-top: 18px;
color: var(--red);
font-weight: 700;
font-size: 16px;
}

.pg-result {
margin-top: 24px;
padding: 20px;
border: 1px solid var(--black);
background: var(--soft);
}

.pg-result strong {
display: block;
margin-bottom: 10px;
font-size: 24px;
line-height: 1.2;
color: var(--black);
}

.pg-result p {
margin: 0 0 10px;
color: var(--muted);
font-size: 18px;
line-height: 1.45;
}

.pg-result p:last-child {
margin-bottom: 0;
}

.pg-copy {
max-width: 940px;
}

.pg-copy p {
margin: 0 0 16px;
font-size: 20px;
line-height: 1.5;
color: var(--black);
}

.pg-copy ul {
padding-left: 22px;
margin-top: 6px;
}

.pg-copy li {
margin-bottom: 10px;
color: var(--black);
}

.pg-copy a,
.pg-faq a,
.pg-links a {
color: var(--black);
}

.pg-copy a,
.pg-faq a {
font-weight: 800;
border-bottom: 2px solid var(--red);
}

.pg-copy a:hover,
.pg-faq a:hover {
color: var(--red);
}

.pg-formulas {
display: grid;
gap: 12px;
margin: 12px 0 18px;
}

.pg-formula {
display: inline-block;
padding: 14px 18px;
border: 1px solid var(--black);
background: var(--soft);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
}

.pg-precision {
display: grid;
gap: 18px;
}

.pg-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.pg-tab {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 12px 18px;
border: 1px solid var(--black);
font-weight: 800;
background: var(--white);
}

.pg-tab-active {
background: var(--black);
color: var(--white);
}

.pg-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border-top: 1px solid var(--black);
border-left: 1px solid var(--black);
}

.pg-card {
min-height: 250px;
padding: 28px 24px;
border-right: 1px solid var(--black);
border-bottom: 1px solid var(--black);
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--white);
transition: .18s ease;
}

.pg-card:hover {
background: var(--black);
color: var(--white);
}

.pg-card h3 {
margin: 0 0 14px;
font-size: 26px;
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
}

.pg-card p {
color: inherit;
opacity: .82;
font-size: 17px;
line-height: 1.4;
}

.pg-card span {
display: inline-block;
margin-top: 24px;
color: inherit;
font-weight: 800;
font-size: 16px;
}

.pg-cta {
border: 1px solid var(--black);
padding: 28px;
background: var(--white);
}

.pg-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.pg-links a {
padding: 12px 16px 11px;
border: 1px solid var(--black);
font-weight: 800;
line-height: 1;
}

.pg-links a:hover {
background: var(--black);
color: var(--white);
}

.pg-faq {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--black);
}

.pg-faq details {
border-bottom: 1px solid var(--line);
padding: 0;
}

.pg-faq summary {
cursor: pointer;
list-style: none;
padding: 22px 0;
font-size: 22px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.015em;
}

.pg-faq summary::-webkit-details-marker {
display: none;
}

.pg-faq details summary::after {
content: '+';
float: right;
font-size: 28px;
line-height: 1;
color: var(--red);
margin-left: 20px;
}

.pg-faq details[open] summary::after {
content: '–';
}

.pg-faq details p {
max-width: 840px;
padding: 0 0 22px;
color: var(--muted);
font-size: 18px;
line-height: 1.45;
}

.pg-note {
max-width: 860px;
color: var(--muted);
font-size: 16px;
line-height: 1.5;
}

@media (max-width: 1024px) {
.pg-head {
grid-template-columns: 1fr;
gap: 18px;
}

.pg-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
} }

@media (max-width: 768px) {
.pg-form {
grid-template-columns: 1fr;
} }

@media (max-width: 640px) {
.pervak-golovi {
font-size: 16px;
padding: 0 16px 56px;
}

.pg-section {
padding: 36px 0;
}

.pg-hero {
padding: 8px 0 34px;
}

.pg-title {
font-size: 46px;
}

.pg-lead,
.pg-head p,
.pg-copy p,
.pg-cta p {
font-size: 18px;
}

.pg-actions,
.pg-calc-actions,
.pg-tabs {
flex-direction: column;
align-items: stretch;
}

.pg-btn,
.pg-tab {
width: 100%;
}

.pg-grid {
grid-template-columns: 1fr;
}

.pg-card {
min-height: auto;
}

.pg-formula {
width: 100%;
font-size: 18px;
} }