/* ==========================================================================
   ОАО «Универмаг «Центральный» — страница услуг
   Файл: templates/section/css/services.css
   Иконки встроены в CSS как векторные data-URI: отдельных файлов не нужно,
   фильтры Joomla до них не дотягиваются, на любом экране остаются чёткими.
   ========================================================================== */

.tsm-srv {
  --tsm-brand: #57071a;
  --tsm-brand-deep: #3d0413;
  --tsm-accent: #b94a24;
  --tsm-accent-deep: #96381a;
  --tsm-accent-wash: rgba(185, 74, 36, .09);
  --tsm-ink: #201a1c;
  --tsm-muted: #6f6469;
  --tsm-line: #e7e1e2;
  --tsm-paper: #f6f4f5;
  --tsm-white: #fff;

  --tsm-radius: 14px;

  color: var(--tsm-ink);
  font-size: 15px;
  line-height: 1.5;
}

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

.tsm-srv p { margin: 0; }

/* --- вступление ------------------------------------------------------------------ */

.tsm-srv__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tsm-accent);
}

.tsm-srv__title {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: clamp(22px, 1.25rem + 1vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tsm-ink);
}

.tsm-srv__lead {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tsm-muted);
}

/* --- этаж как разделитель ---------------------------------------------------------- */

.tsm-srv__floor {
  clear: both;
  margin-top: clamp(24px, 4vw, 34px);
}

.tsm-srv__floor-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tsm-line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tsm-muted);
}

.tsm-srv__floor-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--tsm-brand);
  color: var(--tsm-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 10px;
}

/* --- карточка услуги ---------------------------------------------------------------- */

.tsm-srv__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.tsm-service {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 4px 14px;
  padding: 14px 16px;
  border: 1px solid var(--tsm-line);
  border-radius: var(--tsm-radius);
  background: var(--tsm-white);
  transition: border-color .2s ease, background-color .2s ease;
}

.tsm-service:hover {
  border-color: rgba(185, 74, 36, .4);
  background: var(--tsm-paper);
}

.tsm-service::before {
  content: "";
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: var(--tsm-accent-wash);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.tsm-service__title {
  align-self: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tsm-ink);
}

.tsm-service__place {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tsm-muted);
}

/* карточка без второй строки: заголовок встаёт по центру иконки */
.tsm-service__title:only-of-type { align-self: center; }

/* --- доставка: отдельная широкая полоса ----------------------------------------------- */

.tsm-srv__extra {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 4px 14px;
  margin-top: clamp(24px, 4vw, 34px);
  padding: 16px 18px;
  border: 1px solid var(--tsm-line);
  border-left: 3px solid var(--tsm-accent);
  border-radius: 3px var(--tsm-radius) var(--tsm-radius) 3px;
  background: var(--tsm-paper);
}

.tsm-srv__extra::before {
  content: "";
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: var(--tsm-white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.tsm-srv__extra-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tsm-ink);
}

.tsm-srv__extra-text {
  grid-column: 2;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tsm-muted);
}

@media (max-width: 480px) {
  .tsm-service { padding: 13px 14px; gap: 4px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tsm-service { transition: none; }
}

@media print {
  .tsm-service, .tsm-srv__extra { break-inside: avoid; }
}

/* --- иконки ---------------------------------------------------------------------------- */

.tsm-service--gift::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='9' width='18' height='12' rx='1.5'/><path d='M3 13h18M12 9v12'/><path d='M12 9S10.6 4.6 8.2 5.3 8.3 9 8.3 9H12zM12 9s1.4-4.4 3.8-3.7S15.7 9 15.7 9H12z'/></svg>"); }
.tsm-service--food::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5h16'/><path d='M5.5 20.5v-5A3 3 0 0 1 8.5 12.5h7a3 3 0 0 1 3 3v5'/><path d='M9 12.5v-3M12 12.5V8.5M15 12.5v-3'/></svg>"); }
.tsm-service--jewel::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h10l4 6-9 12L3 9z'/><path d='M3 9h18M9.5 3 7 9l5 12M14.5 3 17 9l-5 12'/></svg>"); }
.tsm-service--truck::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2 6.5h11.5v10H2z'/><path d='M13.5 9.5h3.9l3.6 3.7v3.3h-7.5z'/><circle cx='7' cy='18.8' r='1.9'/><circle cx='17' cy='18.8' r='1.9'/></svg>"); }
.tsm-service--key::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='12' r='4.2'/><path d='M12.2 12H21M18.3 12v3.2M15.3 12v2.4'/></svg>"); }
.tsm-service--photo::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h4l1.6-2.6h6.8L17 8h4v12H3z'/><circle cx='12' cy='13.6' r='3.6'/></svg>"); }
.tsm-service--print::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M7 8.5V3h10v5.5'/><rect x='3' y='8.5' width='18' height='8' rx='1.5'/><path d='M7 13.5h10V21H7z'/></svg>"); }
.tsm-service--phone::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.5'/><path d='M10.5 5.6h3M12 18.4h.01'/></svg>"); }
.tsm-service--watch::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='5.4'/><path d='M12 9.4V12l1.9 1.3'/><path d='M9.3 7 9.6 3h4.8l.3 4M9.3 17l.3 4h4.8l.3-4'/></svg>"); }
.tsm-service--umbrella::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.8 12a9.2 9.2 0 0 1 18.4 0z'/><path d='M12 12v6.6a2.6 2.6 0 0 0 5.2 0'/></svg>"); }
.tsm-service--shoe::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h4.4l1.2 3.8 6.2 2.4c2.2.9 6.2 1.2 6.2 3.4V19H3z'/><path d='M3 15.4h18'/></svg>"); }
.tsm-service--tailor::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8.6 3 12 5.4 15.4 3 21 6.2l-2.6 4.2-2.1-1.3V21H7.7V9.1L5.6 10.4 3 6.2z'/></svg>"); }
.tsm-service--flower::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='6.6' r='2.5'/><circle cx='7.8' cy='9.4' r='2.5'/><circle cx='16.2' cy='9.4' r='2.5'/><path d='M12 11.6V21'/><path d='M12 16.4c-2.6 0-4.2-1.6-4.2-3.2'/></svg>"); }
.tsm-service--bank::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='5.4' width='18.8' height='11.2' rx='1.5'/><circle cx='12' cy='11' r='2.9'/><path d='M6.2 19.6h11.6'/></svg>"); }
.tsm-service--ad::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10v4a1 1 0 0 0 1 1h3.2l6.8 4V5l-6.8 4H5a1 1 0 0 0-1 1z'/><path d='M18.6 9.4a4.2 4.2 0 0 1 0 5.2'/></svg>"); }

/* ==========================================================================
   ЗАЩИТА ОТ СТИЛЕЙ ШАБЛОНА
   style.css и os_pages.css бьют по #contentBox и .item-page, их специфичность
   выше наших классов. Блок должен оставаться последним в файле.
   ========================================================================== */

.tsm-srv h2 {
  display: block !important;
  float: none !important;
  padding-left: 0 !important;
  background: none !important;
  text-align: left !important;
  text-transform: none !important;
}

.tsm-srv__eyebrow,
.tsm-srv__lead,
.tsm-srv__extra-title,
.tsm-srv__extra-text {
  display: block !important;
  float: none !important;
  text-align: left !important;
  text-indent: 0 !important;
}

.tsm-srv .tsm-srv__floor-label { display: flex !important; }
.tsm-srv .tsm-service,
.tsm-srv .tsm-srv__extra { display: grid !important; float: none !important; }

.tsm-srv .tsm-service__title,
.tsm-srv .tsm-service__place { display: block !important; }

.tsm-srv .tsm-service img,
.tsm-srv .tsm-srv__extra img { display: none !important; }