/* ==============================================
   ООО «Вент-Сервис» — Global Styles
   Modernized from original style.css + erion.css
   IE hacks removed; all pixel values, colors,
   and class names preserved from the archive.
   ============================================== */

:root {
  --color-blue-light: #D1E4F4;
  --color-blue-xlight: #E9F2FA;
  --color-link: #00439D;
  --color-hover: #CC0000;
  --color-orange: #F36D24;
  --color-orange-alt: #FF6600;
  --color-text: #333333;
  --color-text-dark: #000000;
  --color-text-muted: #666666;

  --site-width: 776px;
  --sidebar-width: 169px;
  --content-offset: 193px;
  --header-height: 185px;
  --neck-height: 34px;
  --footer-height: 35px;

  --font-base: Arial, Helvetica, sans-serif;
  --font-size-base: 12px;
  --font-size-h1: 18px;
  --font-size-h3: 21px;
  --font-size-h4-table: 16px;
  --font-size-usual-head: 18px;
}

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

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  font: var(--font-size-base) var(--font-base);
  color: var(--color-text);
}

/* ---- Headings ---- */
h1 {
  font-size: var(--font-size-h1);
  padding-top: 9px;
  margin-top: 0;
}

h3 {
  background-color: var(--color-blue-light);
  width: 100%;
  text-align: center;
  font-size: var(--font-size-h3);
  margin: 0 0 8px 0;
  padding: 4px 0;
}

table tr td h4 {
  margin-top: 0;
  font-size: var(--font-size-h4-table);
  color: var(--color-text-dark);
}

/* ---- Links ---- */
a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-hover);
}

a img {
  border: none;
}

/* ---- Product components ---- */
.ProdImg {
  border: 1px solid var(--color-blue-light);
  padding: 5px;
  width: 100px;
  height: 100px;
  display: block;
}

.ProdTable {
  border: none;
  margin-top: 25px;
  width: 100%;
  border-collapse: collapse;
}

.ProdH3 {
  background-color: var(--color-blue-light);
}

.ProdTable h4 {
  background-color: var(--color-blue-xlight);
  padding: 3px 6px;
}

/* ---- Price components ---- */
.PriceHead {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text);
}

.PriceText {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text-dark);
}

.PriceCategory {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-orange-alt);
}

.PriceUsual {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text-muted);
}

/* ---- Text utility classes ---- */
.UsualText {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: normal;
  color: var(--color-text);
  text-decoration: none;
}

.UsualText:hover {
  text-decoration: underline;
}

.UsualHead {
  font-family: var(--font-base);
  font-size: var(--font-size-usual-head);
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
}

.UsualMenu {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
}

.UsualMenu:hover {
  text-decoration: underline;
}

.orange {
  color: var(--color-orange);
}

/* ---- Info box (.q) ---- */
.q {
  border: 1px solid rgb(235, 220, 173);
  padding: 5px;
  background-color: rgb(255, 250, 235);
}

.q h2 {
  margin-top: 14px;
}

.q ol,
.q ul {
  padding-left: 40px;
}

.q ul li {
  padding: 0;
}

/* ---- Sitemap list ---- */
#sitemap {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sitemap li {
  padding-left: 17px;
  margin-bottom: 4px;
  font-weight: bold;
  position: relative;
}

#sitemap li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--color-text);
}

#sitemap li a {
  text-decoration: none;
  color: var(--color-text);
}

#sitemap li a:hover {
  text-decoration: underline;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-size: var(--font-size-base);
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-link);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

.breadcrumb span + span::before {
  content: ' > ';
}

/* ---- Document list ---- */
.doc-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.doc-list li {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Doc thumbnail grid ---- */
.doc-thumb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

.doc-thumb {
  text-align: center;
}

.doc-thumb img {
  display: block;
  border: 1px solid var(--color-blue-light);
  margin-bottom: 4px;
}

.doc-thumb p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* ---- Scheme gallery ---- */
.scheme-gallery {
  display: flex;
  gap: 16px;
  margin: 12px 0;
}

.scheme-item {
  text-align: center;
}

.scheme-item img {
  display: block;
  border: 1px solid var(--color-blue-light);
  margin-bottom: 4px;
}

.scheme-item p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* ---- Category card grid (home page) ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.category-card {
  text-align: center;
  border: 1px solid var(--color-blue-light);
  padding: 8px;
  background: #fff;
}

.category-card img {
  display: block;
  width: 100%;
  max-width: 262px;
  height: auto;
  margin: 0 auto 6px;
}

.category-card a {
  font-weight: bold;
  font-size: var(--font-size-base);
  color: var(--color-link);
  text-decoration: none;
}

.category-card a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}