/* ============================================================
   Аренда инструмента — kabel27.ru
   Стили страницы. Bitrix / Aspro Premier.
   Все классы с префиксом .ar- и вложены в .ar-page — конфликтов
   с классами шаблона нет.
   Цвета берутся из переменных темы (--theme-base-color,
   --theme-more-color); fallback — на случай, если переменных нет.
   ============================================================ */

.ar-page{
  --ar-base: var(--theme-base-color, #fde037);
  --ar-base-dark:#e8c81f;
  --ar-base-soft:rgba(253,224,55,.10);
  --ar-more: var(--theme-more-color, #8184a1);
  --ar-text:#2b2b2b;
  --ar-muted:#767676;
  --ar-line:#e5e5e5;
  --ar-soft-bg:#f7f7f8;
  --ar-radius:4px;
  --ar-radius-lg:8px;
  --ar-shadow:0 2px 12px rgba(0,0,0,.06);
  --ar-shadow-hover:0 6px 24px rgba(0,0,0,.1);
  --ar-btn-text:#333;

  /* Размер и интерлиньяж НЕ переопределяем — наследуются от шаблона
     (body: font-size:1rem; line-height:calc(1em + 8px); font-family темы).
     Все размеры ниже заданы в em, поэтому масштабируются вместе с сайтом. */
  color:var(--ar-text);
}
.ar-page *,
.ar-page *::before,
.ar-page *::after{box-sizing:border-box;}

.ar-page img{max-width:100%;height:auto;}
.ar-page a{transition:color .2s;}

.ar-page h2,
.ar-page h3{
  /* font-size / font-weight / font-family / line-height — из шаблона
     (h2 = clamp(1rem+8px,2vw,1rem+12px), h3 = clamp(1rem+4px,2vw,1rem+8px),
      font-weight:500). Переопределяем только отступы. */
  margin:0 0 16px;
}
.ar-page p{margin:0 0 .875em;}

/* ---------- Секции ---------- */
.ar-section{padding:48px 0;}
.ar-section:first-child{padding-top:8px;}
.ar-section--soft{
  background:var(--ar-soft-bg);
  /* растяжка фона на всю ширину контентной колонки */
  padding-left:24px;padding-right:24px;
  border-radius:var(--ar-radius-lg);
}
.ar-head{max-width:820px;margin-bottom:32px;}
.ar-head h2{margin-bottom:10px;}
.ar-head p{color:var(--ar-muted);font-size:1em;margin-bottom:0;}

/* ---------- Кнопки (по образцу .btn-default Aspro) ---------- */
.ar-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border:1px solid transparent;border-radius:var(--ar-radius);
  font-family:inherit;font-size:0.875em;font-weight:600;line-height:1.2;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background-color .2s,border-color .2s,color .2s;
}
.ar-btn:hover,.ar-btn:focus{text-decoration:none;}
.ar-btn--primary{background:var(--ar-base);border-color:var(--ar-base);color:var(--ar-btn-text);}
.ar-btn--primary:hover{background:var(--ar-base-dark);border-color:var(--ar-base-dark);color:var(--ar-btn-text);}
.ar-btn--outline{background:#fff;border-color:var(--ar-line);color:var(--ar-text);}
.ar-btn--outline:hover{border-color:var(--ar-base);background:var(--ar-base-soft);color:var(--ar-text);}
.ar-btn--block{width:100%;}
.ar-btn--lg{padding:15px 34px;font-size:0.9375em;}

/* ---------- Первый экран ---------- */
.ar-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;}
.ar-hero__lead{font-size:1.0625em;color:var(--ar-muted);max-width:640px;}
.ar-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.ar-hero__card{
  background:var(--ar-soft-bg);border:1px solid var(--ar-line);
  border-radius:var(--ar-radius-lg);padding:26px 28px;
}
.ar-hero__card h3{margin-bottom:14px;}
.ar-hero__card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;font-size:0.875em;}
.ar-hero__card dt{color:var(--ar-muted);}
.ar-hero__card dd{margin:0;font-weight:600;text-align:right;}
.ar-hero__note{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--ar-line);
  font-size:0.75em;line-height:1.5;color:var(--ar-muted);
}
.ar-hero__note a{color:inherit;}

/* ---------- Преимущества ---------- */
.ar-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
.ar-usp__item{
  background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-radius-lg);
  padding:24px 22px;transition:box-shadow .2s,border-color .2s;
}
.ar-usp__item:hover{box-shadow:var(--ar-shadow);border-color:#d8d8d8;}
.ar-usp__icon{
  width:42px;height:42px;border-radius:var(--ar-radius);background:var(--ar-base-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.25em;margin-bottom:14px;
}
.ar-usp__item h3{font-size:1em;margin-bottom:7px;}
.ar-usp__item p{font-size:0.875em;color:var(--ar-muted);margin:0;}

/* ---------- Карточки инструмента ---------- */
.ar-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.ar-tool{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--ar-line);border-radius:var(--ar-radius-lg);overflow:hidden;
  transition:box-shadow .2s,border-color .2s;
}
.ar-tool:hover{box-shadow:var(--ar-shadow-hover);border-color:#d8d8d8;}
.ar-tool__media{
  position:relative;height:230px;flex:none;background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:20px;border-bottom:1px solid var(--ar-line);
}
.ar-tool__media img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;}
.ar-tool__media--empty{background:var(--ar-base-soft);border-bottom-color:var(--ar-base);}
.ar-tool__empty{text-align:center;padding:10px;}
.ar-tool__empty-icon{font-size:2.125em;line-height:1;margin-bottom:10px;}
.ar-tool__empty-title{font-weight:600;font-size:0.9375em;}
.ar-tool__badge{
  position:absolute;top:12px;left:12px;background:var(--ar-base);color:var(--ar-btn-text);
  font-size:0.6875em;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:5px 10px;border-radius:var(--ar-radius);z-index:1;
}
.ar-tool__body{display:flex;flex-direction:column;flex:1;padding:20px;}
.ar-tool__title{font-size:1em;font-weight:600;line-height:1.35;margin:0 0 12px;}
.ar-tool__specs{list-style:none;margin:0 0 16px;padding:0;font-size:0.8125em;color:var(--ar-muted);}
.ar-tool__specs li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--ar-line);margin:0;}
.ar-tool__specs li:last-child{border-bottom:0;}
.ar-tool__specs b{color:var(--ar-text);font-weight:600;text-align:right;}
.ar-tool__note{font-size:0.875em;color:var(--ar-muted);}
/* ЦЕНЫ: подставить реальные значения вместо «по запросу» */
.ar-tool__price{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--ar-line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;
}
.ar-tool__price small{font-size:0.75em;color:var(--ar-muted);}
.ar-tool__price strong{font-size:1.0625em;font-weight:700;}
.ar-tool__actions{display:grid;gap:8px;}
.ar-tool__buy{font-size:0.8125em;color:var(--ar-more);text-align:center;padding-top:2px;}
.ar-tool__buy:hover{text-decoration:underline;}

/* ---------- Условия аренды ---------- */
.ar-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.ar-terms__col{background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-radius-lg);padding:28px;}
.ar-terms__col ul{list-style:none;padding:0;margin:0;}
.ar-terms__col li{position:relative;padding-left:24px;margin-bottom:11px;font-size:0.9062em;}
.ar-terms__col li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--ar-base);
}
.ar-terms__col li:last-child{margin-bottom:0;}
.ar-note{
  margin-top:24px;padding:18px 22px;background:var(--ar-base-soft);
  border-left:3px solid var(--ar-base);border-radius:var(--ar-radius);font-size:0.875em;
}
.ar-note p:last-child{margin-bottom:0;}

/* ---------- Шаги ---------- */
.ar-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:ar-step;}
.ar-step{position:relative;padding-top:14px;}
.ar-step::before{
  counter-increment:ar-step;content:counter(ar-step);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--ar-base);
  color:var(--ar-btn-text);font-weight:700;font-size:1em;margin-bottom:16px;
}
.ar-step h3{font-size:1em;margin-bottom:7px;}
.ar-step p{font-size:0.875em;color:var(--ar-muted);margin:0;}

/* ---------- Разделы каталога ---------- */
.ar-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ar-cat{
  display:flex;flex-direction:column;gap:6px;background:#fff;
  border:1px solid var(--ar-line);border-radius:var(--ar-radius-lg);padding:22px 24px;
  text-decoration:none;color:var(--ar-text);
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.ar-cat:hover{box-shadow:var(--ar-shadow);border-color:var(--ar-base);transform:translateY(-2px);color:var(--ar-text);text-decoration:none;}
.ar-cat__title{font-size:1em;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ar-cat__count{color:var(--ar-base-dark);font-weight:700;}
.ar-cat__desc{font-size:0.8438em;color:var(--ar-muted);}

/* ---------- FAQ ---------- */
.ar-faq{max-width:900px;}
.ar-faq details{border:1px solid var(--ar-line);border-radius:var(--ar-radius-lg);background:#fff;margin-bottom:12px;}
.ar-faq summary{
  cursor:pointer;list-style:none;padding:18px 54px 18px 22px;
  font-weight:600;font-size:0.9688em;position:relative;
}
.ar-faq summary::-webkit-details-marker{display:none;}
.ar-faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.375em;font-weight:400;color:var(--ar-more);line-height:1;
}
.ar-faq details[open] summary::after{content:"–";}
.ar-faq__answer{padding:0 22px 20px;font-size:0.9062em;color:var(--ar-muted);}
.ar-faq__answer p:last-child{margin-bottom:0;}

/* ---------- Блок заявки ---------- */
.ar-form-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;}
.ar-form-block__info p{color:var(--ar-muted);}
.ar-contacts{list-style:none;padding:0;margin:22px 0 0;font-size:0.9062em;}
.ar-contacts li{margin-bottom:12px;}
.ar-contacts b{display:block;font-size:0.75em;color:var(--ar-muted);font-weight:400;margin-bottom:2px;}
.ar-contacts__phone{font-size:1.1875em;font-weight:700;}

/* Слот под штатную форму Битрикса */
.ar-form-slot{
  background:#fff;border:1px solid var(--ar-line);
  border-radius:var(--ar-radius-lg);padding:30px;min-height:220px;
}

/* ---------- Адаптив ---------- */
@media (max-width:1200px){
  .ar-usp{grid-template-columns:repeat(2,1fr);}
  .ar-steps{grid-template-columns:repeat(2,1fr);}
  .ar-cats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .ar-section{padding:36px 0;}
  .ar-hero__grid,.ar-terms,.ar-form-block{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .ar-usp,.ar-steps,.ar-cats{grid-template-columns:1fr;}
  .ar-section--soft{padding-left:16px;padding-right:16px;}
  .ar-terms__col,.ar-hero__card,.ar-form-slot{padding:20px;}
}