/* ==========================================================================
   base.css — токены, сброс, типографика, утилиты
   Полностью заменяет Bootstrap: d-*, text-*, mb-*, pt-*, border-radius-*, btn-*
   Единица: html { font-size: 62.5% } => 1rem = 10px, 1.5rem = 15px
   ========================================================================== */

:root {
  /* --- Цвета (взяты из template/css/style.css оригинала) --- */
  --c-primary: #313131;          /* bg__primary  — тёмно-серый */
  --c-secondary: #4f92d7;        /* bg__secondary — синий, акцент бренда */
  --c-secondary-hover: #3a78b8;
  --c-fg: #121416;
  --c-fg-sub: #898686;
  --c-text: #000;
  --c-white: #fff;
  --c-bg: #fff;
  --c-bg-offwhite: #f7f7f7;
  --c-bg-dark: #1a1818;
  --c-bg-black: #000;
  --c-border: #e5e5e5;
  --c-border-strong: #d5d5d5;
  --c-whatsapp: #43d854;
  --c-telegram: #0088cc;
  --c-danger: #e2453d;
  --c-success: #2fa84f;

  /* --- Шрифты --- */
  --ff-body: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-head: "Rubik", var(--ff-body);
  --ff-alt: "Inter", var(--ff-body);
  --fs-body: 1.5rem;
  --lh-body: 2.8rem;
  --fw-body: 400;
  --fw-head: 700;

  /* --- Радиусы --- */
  --r-xs: .3rem;
  --r-sm: .5rem;
  --r-md: 1rem;
  --r-lg: 2rem;
  --r-xl: 3rem;
  --r-pill: 2.4rem;
  --r-full: 50%;

  /* --- Тени --- */
  --sh-sm: 0 0 7px rgba(0, 0, 0, .08);
  --sh-md: 0 5px 30px rgba(0, 0, 0, .1);
  --sh-lg: 0 2px 22px rgba(0, 0, 0, .16);

  /* --- Прочее --- */
  --tr: all .3s ease 0s;
  --gutter: 1.5rem;
  --row-gap: 2rem;
  --header-h: 84px;
  --z-header: 99;
  --z-toolbar: 99;
  --z-overlay: 9998;
  --z-drawer: 9999;
}

/* ==========================================================================
   СБРОС
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;            /* 1rem = 10px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--c-fg);
  background-color: var(--c-bg);
  overflow-x: hidden;
}

@media (max-width: 991px) {
  body {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  display: inline-block;
  color: var(--c-fg);
  text-decoration: none;
  transition: var(--tr);
}

a:hover {
  color: var(--c-secondary);
  text-decoration: none;
}

button {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  transition: var(--tr);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

input, select, textarea {
  max-width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--c-border);
}

::placeholder {
  color: var(--c-fg-sub);
  opacity: 1;
}

:focus-visible {
  outline: 2px solid var(--c-secondary);
  outline-offset: 2px;
}

/* Блокируем скролл при открытых оверлеях (замена body.overlay__active из темы) */
body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   ЗАГОЛОВКИ
   Размеры перенесены 1:1 из style.css оригинала (rem = px/10)
   ========================================================================== */

h1, .h1 { font-size: 2.2rem;  line-height: 3.2rem; font-weight: var(--fw-head); }
h2, .h2 { font-size: 1.7rem;  line-height: 2.4rem; font-weight: var(--fw-head); }
h3, .h3 { font-size: 1.5rem;  line-height: 2.4rem; font-weight: var(--fw-head); }
h4, .h4 { font-size: 1.6rem;  line-height: 2.6rem; font-weight: var(--fw-head); }
h5, .h5 { font-size: 1.4rem;  line-height: 2.2rem; font-weight: 600; }
h6, .h6 { font-size: 1.3rem;  line-height: 2rem;   font-weight: 600; }

@media (min-width: 480px) {
  h1, .h1 { font-size: 2.8rem; line-height: 3.7rem; }
}
@media (min-width: 576px) {
  h1, .h1 { font-size: 3rem;   line-height: 3.8rem; }
  h2, .h2 { font-size: 1.8rem; line-height: 2.6rem; }
}
@media (min-width: 768px) {
  h1, .h1 { font-size: 3.2rem; line-height: 4rem; }
  h2, .h2 { font-size: 1.8rem; line-height: 2.6rem; }
  h3, .h3 { font-size: 1.5rem; line-height: 2.4rem; }
}
@media (min-width: 992px) {
  h1, .h1 { font-size: 4rem;   line-height: 5rem; }
  h2, .h2 { font-size: 1.9rem; line-height: 2.8rem; }
  h3, .h3 { font-size: 1.6rem; line-height: 2.5rem; }
}
@media (min-width: 1200px) {
  h1, .h1 { font-size: 4.5rem; line-height: 5rem; }
  h2, .h2 { font-size: 2rem;   line-height: 3rem; }
  h4, .h4 { font-size: 1.7rem; line-height: 2.8rem; }
}
@media (min-width: 1366px) {
  h1, .h1 { line-height: 5.5rem; }
  h2, .h2 { font-size: 2.2rem; line-height: 3.2rem; }
}

/* ==========================================================================
   ТЕКСТ
   ========================================================================== */

p {
  margin-bottom: 1rem;
  font-family: var(--ff-alt);
}
@media (min-width: 1200px) {
  p { margin-bottom: 1.5rem; }
}
p:last-child { margin-bottom: 0; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-main      { color: var(--c-primary) !important; }
.text-accent    { color: var(--c-secondary) !important; }
.text-muted     { color: var(--c-fg-sub) !important; }
.text-inverse   { color: var(--c-white) !important; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp-2,
.clamp-3,
.clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

/* Цена — ключевой элемент карточек */
.price {
  font-family: var(--ff-head);
  font-weight: 700;
  color: var(--c-fg);
  white-space: nowrap;
}
.price--old {
  margin-left: .8rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-fg-sub);
  text-decoration: line-through;
}

/* ==========================================================================
   ФОНЫ И ГРАНИЦЫ  (замена bg__primary / bg__secondary / border-radius-* / border-bottom)
   ========================================================================== */

.bg-primary   { background-color: var(--c-primary) !important; }
.bg-secondary { background-color: var(--c-secondary) !important; }
.bg-offwhite  { background-color: var(--c-bg-offwhite) !important; }
.bg-dark      { background-color: var(--c-bg-dark) !important; }
.bg-white     { background-color: var(--c-white) !important; }
.bg-transparent{ background-color: transparent !important; }

.r-xs   { border-radius: var(--r-xs) !important; }
.r-sm   { border-radius: var(--r-sm) !important; }
.r-md   { border-radius: var(--r-md) !important; }
.r-lg   { border-radius: var(--r-lg) !important; }
.r-xl   { border-radius: var(--r-xl) !important; }
.r-pill { border-radius: var(--r-pill) !important; }
.r-full { border-radius: var(--r-full) !important; }

.border        { border: 1px solid var(--c-border) !important; }
.border-top    { border-top: 1px solid var(--c-border) !important; }
.border-right  { border-right: 1px solid var(--c-border) !important; }
.border-bottom { border-bottom: 1px solid var(--c-border) !important; }
.border-left   { border-left: 1px solid var(--c-border) !important; }
.border-0      { border: 0 !important; }

.rel  { position: relative; }
.abs  { position: absolute; }
.fixed{ position: fixed; }
.sticky{ position: sticky; }
.z-1{ z-index: 1; } .z-2{ z-index: 2; } .z-3{ z-index: 3; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.hidden-visually {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.no-scroll { overflow: hidden; }

/* ==========================================================================
   FLEX / GRID УТИЛИТЫ  (замена d-flex, justify-content-*, align-items-*, gap-*)
   ========================================================================== */

.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block       { display: block !important; }
.d-inline      { display: inline !important; }
.d-none        { display: none !important; }

/* Адаптивные display-утилиты (аналог d-{bp}-{value} из Bootstrap) */
@media (max-width: 575px) {
  .d-xs-none  { display: none !important; }
  .d-xs-block { display: block !important; }
  .d-xs-flex  { display: flex !important; }
}
@media (min-width: 576px) {
  .d-sm-none        { display: none !important; }
  .d-sm-block       { display: block !important; }
  .d-sm-flex        { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
}
@media (min-width: 768px) {
  .d-md-none        { display: none !important; }
  .d-md-block       { display: block !important; }
  .d-md-flex        { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
}
@media (min-width: 992px) {
  .d-lg-none        { display: none !important; }
  .d-lg-block       { display: block !important; }
  .d-lg-flex        { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
}
@media (min-width: 1200px) {
  .d-xl-none        { display: none !important; }
  .d-xl-block       { display: block !important; }
  .d-xl-flex        { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
}

.flex-wrap    { flex-wrap: wrap !important; }
.flex-nowrap  { flex-wrap: nowrap !important; }
.flex-column  { flex-direction: column !important; }
.flex-row     { flex-direction: row !important; }
.flex-auto    { flex: 1 1 auto !important; }
.flex-fill    { flex: 1 1 100% !important; }

.items-start    { align-items: flex-start !important; }
.items-center   { align-items: center !important; }
.items-end      { align-items: flex-end !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch  { align-items: stretch !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }

.align-self-start   { align-self: flex-start !important; }
.align-self-center  { align-self: center !important; }
.align-self-end     { align-self: flex-end !important; }

.gap-1 { gap: .5rem  !important; }
.gap-2 { gap: 1rem  !important; }
.gap-3 { gap: 1.5rem !important; }
.gap-4 { gap: 2rem  !important; }
.gap-5 { gap: 3rem  !important; }
.gap-6 { gap: 4rem  !important; }

.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }

/* Поля и отступы: t/b/l/r/x/y + шаг .5–.6rem (=5–60px) */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 2.5rem !important; }
.mt-6 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }
.mb-6 { margin-bottom: 3rem !important; }

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 2.5rem !important; }
.pt-6 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }
.pb-5 { padding-bottom: 2.5rem !important; }
.pb-6 { padding-bottom: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }