/* ============================================================================
   elprommash.kz — дизайн-система
   Куда: /wp-content/uploads/elpm-fonts/design-system.css
   Подключать ПОСЛЕДНИМ (после темы, Elementor, WooCommerce).
   Файл с ТЗ «Дизайн-система» — на сайте его СЕЙЧАС НЕТ (404).
   ============================================================================ */

:root{

  /* ══ ЦВЕТА ══════════════════════════════════════════════════ */
  --c-accent:        #C41E3A;
  --c-accent-hover:  #A81832;
  --c-accent-soft:   #F7DDE3;

  --c-heading:       #0F172A;
  --c-text:          #334155;
  --c-muted:         #64748B;
  --c-line:          #E6E9EF;
  --c-surface:       #FFFFFF;
  --c-bg:            #F4F6FA;
  --c-dark:          #0F172A;

  /* ══ ТИПОГРАФИКА ════════════════════════════════════════════ */
  --fs-hero:    clamp(30px, 3.4vw, 46px);
  --fs-h2:      clamp(24px, 2.4vw, 34px);
  --fs-h3:      clamp(19px, 1.6vw, 24px);
  --fs-h4:      18px;
  --fs-lead:    17px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --tr-display: -0.025em;
  --tr-tight:   -0.01em;
  --tr-normal:   0;
  --tr-caps:     0.10em;

  --lh-display: 1.08;
  --lh-head:    1.2;
  --lh-body:    1.6;

  /* ══ СЕТКА ══════════════════════════════════════════════════ */
  --container:      1280px;
  --container-text:  820px;
  --gutter: clamp(16px, 3vw, 32px);

  /* ══ ОТСТУПЫ ════════════════════════════════════════════════ */
  --sp-section: clamp(48px, 6vw, 88px);
  --sp-block:   clamp(24px, 3vw, 40px);
  --sp-card:    clamp(20px, 2.4vw, 32px);
  --sp-xs:  8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* ══ СКРУГЛЕНИЯ / ТЕНИ ══════════════════════════════════════ */
  --r-sm:    8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;
  --r-circle: 50%;

  --sh-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sh-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sh-lg: 0 20px 50px rgba(15, 23, 42, 0.10);
  --sh-accent: 0 8px 22px rgba(196, 30, 58, 0.28);
}

/* ===== Сетка — все страницы на одну вертикаль ===== */
.elp-hero2__inner,
.elp-ben__grid,
.elp-stp__track,
.elp-split__inner,
.elp-compare__grid,
.elp-about-hero__inner,
.elp-about-history__head,
.elp-about-main__grid,
.elp-about-stats__row,
.elp-about-mission,
.elp-about-links__grid,
.elpm-catalog-home,
.elpm-contacts,
.elpm-footer__inner,
.elpm-cat-section,
.site-main .ct-container,
.woocommerce .ct-container{
  max-width: var(--container) !important;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.elp-ben__head,
.elp-stp__head,
.elp-compare__head,
.elp-about-clients__inner,
.elp-about-tl,
.elp-about-prose{
  max-width: var(--container-text);
  margin-inline: auto;
}

/* ===== Типографика ролей ===== */
.elp-hero2__title,
.elp-about-hero__title,
.elpm-cat-page-title,
.elpm-contacts-title,
.entry-title{
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--c-heading);
}

.elp-ben__title,
.elp-stp__title,
.elp-split__title,
.elp-compare__title,
.elpm-cat-section-title,
.elpm-contacts-section-title,
.elp-about-links__head{
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-display);
  color: var(--c-heading);
}

.elpm-contacts-office-city,
.elp-about-tl__card,
.elp-ben__card h3,
.elp-stp__name{
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  letter-spacing: var(--tr-tight);
  color: var(--c-heading);
}

.elp-hero2__eyebrow,
.elp-hero2__tag,
.elp-ben__kicker,
.elp-split__eyebrow,
.elp-compare__kicker,
.elp-about-hero__kicker,
.elp-about-tl__year,
.elpm-cat-section-badge,
.elpm-contacts-meta-label,
.elpm-cat-card-count{
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--c-muted);
}
.elp-ben__kicker,
.elp-split__eyebrow,
.elp-about-hero__kicker{ color: var(--c-accent); }

/* Blocksy headings */
h1{ --theme-font-size: var(--fs-hero); --theme-font-weight: 800; --theme-line-height: 1.08; }
h2{ --theme-font-size: var(--fs-h2);   --theme-font-weight: 700; --theme-line-height: 1.2;  }
h3{ --theme-font-size: var(--fs-h3);   --theme-font-weight: 600; --theme-line-height: 1.25; }
h4{ --theme-font-size: var(--fs-h4);   --theme-font-weight: 600; --theme-line-height: 1.3;  }
h5{ --theme-font-size: var(--fs-body); --theme-font-weight: 600; --theme-line-height: 1.4;  }
h6{ --theme-font-size: var(--fs-small);--theme-font-weight: 600; --theme-line-height: 1.4;  }

/* Секции / карточки */
.elp-ben, .elp-stp, .elp-split, .elp-compare,
.elp-about-hero, .elp-about-history, .elp-about-main, .elp-about-links,
.elpm-cat-section, .elpm-contacts-section{
  padding-block: var(--sp-section);
}

/* Карточки с внутренними отступами по контенту */
.elp-hero2__card, .elp-split__panel, .elp-compare__col, .elp-ben__card,
.elp-about-aside, .elp-about-stat, .elp-about-linkcard,
.elpm-contacts-quick-card, .elpm-contacts-office,
.elpm-contacts-requisites{
  padding: var(--sp-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--c-surface);
}

/* Медиа-карточки: отступы задаёт их собственный __body, не контейнер */
.elpm-cat-card, .elpm-product-card{
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  background: var(--c-surface);
}

.elp-hero2__btn, .elp-split__cta, .elpm-price-on-request,
.elpm-cat-search, input, textarea, select, .btn, button,
.woocommerce a.button, .woocommerce button.button{
  border-radius: var(--r-md);
}

.elp-hero2__btn:hover, .elp-split__cta:hover, .elpm-price-on-request:hover{
  box-shadow: var(--sh-accent);
  background: var(--c-accent-hover);
}

/* Футер с px → токены */
.elpm-footer-title{
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}
.elpm-footer-col, .elpm-footer-list, .elpm-footer-address,
.elpm-footer-email, .elpm-footer-label{
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.elpm-footer-copy, .elpm-footer-requisites{
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.elpm-footer-phone{
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-tight);
  line-height: 1.15;
}

/* 4 брейкпоинта вместо 21. Сетку товаров задаёт catalog-cards.css */
@media (max-width: 768px){
  :root{
    --tr-caps: 0.06em;
    --tr-display: -0.015em;
    --sp-section: clamp(36px, 8vw, 56px);
  }
}
@media (max-width: 480px){
  :root{ --fs-body: 15px; --gutter: 16px; }
}