@font-face {
  font-family: 'Indira K';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Indira_K.ttf') format('truetype');
}
:root {
  --bg: #FBF3E3;
  --surface: #FFFDF8;
  --surface-alt: #F2E5C8;
  --text: #4A3823;
  --text-link: #5C4A2E;
  --text-muted: #8C7654;
  --accent: #B8791E;
  --accent-hover: #8F5D14;
  --accent-alt: #A6660F;
  --border: #E3D2A6;
  --hdr-bg: #171009;
  --hdr-surface-alt: #291F14;
  --hdr-text: #D9CFC0;
  --hdr-text-muted: #8C7A5C;
  --hdr-border: #3A2C18;
  --hdr-accent: #D9962E;
  --sans: -apple-system, "Segoe UI", Roboto, Verdana, Arial, sans-serif;
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --radius: 4px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
/* Эксперимент: тёмный цвет шапки "стекает" вниз по фону страницы, плавно
   сливаясь с обычным светлым фоном примерно к середине экрана. Заметно в
   первую очередь по бокам на широких экранах (>1400px, где .site уже с
   краёв не достаёт) -- продолжает ту же идею, что и фейд по краям баннера;
   на обычных 1280-1400px эффект почти не виден, т.к. там колонки и так
   закрывают фон до самого края.
   420px -- примерная высота .hero-zone (замерено 398-468px в зависимости
   от того, переносится ли верхняя навигация на 2 строки при разной
   ширине экрана); сама .hero-zone непрозрачна и рисуется поверх, так что
   точность этой оценки не критична -- отсчёт 50vh начинается ПОСЛЕ шапки,
   а не с самого верха страницы, чтобы весь фейд был виден целиком, а не
   частично "терялся" под уже непрозрачной шапкой.
   Симметрично снизу: .footer-zone (нижняя полоска seo-line, тоже вне .site,
   на всю ширину) непрозрачна на ~150px (5 строк seo-line), и от её края
   вверх идёт такой же по логике фейд акцентным цветом (--accent, тот же
   цвет, что и у самих строк) на 50vh. Оба гардиента -- отдельные слои
   background-image с абсолютными отступами в стопах, поэтому размер общей
   высоты .wrap (которая растёт вместе с контентом страницы) им не важен --
   каждый considers только "свой" край (сверху/снизу). */
.wrap {
  font-family: var(--sans); color: var(--text); font-size: 14px; line-height: 1.55;
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom, var(--hdr-bg) 420px, transparent calc(420px + 50vh)),
    linear-gradient(to top, var(--accent) 150px, transparent calc(150px + 50vh));
}
.hero-zone { background: var(--hdr-bg); }
.site { max-width: 1400px; margin: 0 auto; background: var(--surface); }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.seo-line {
  background: var(--accent); color: #fff; font-size: 12.5px;
  text-align: center; padding: 5px 1rem;
}
.hero-zone .seo-line { background: var(--hdr-bg); color: var(--hdr-accent); border-bottom: 1px solid var(--hdr-border); }

header.top { background: var(--hdr-bg); }
.logo img { height: 40px; width: auto; display: block; }

/* max-width как у .site -- без него .hero-banner (он вне .site) растягивался
   на весь экран на широких мониторах, а object-fit:cover с фиксированной
   max-height:300px при таком растяжении обрезал картинку по вертикали всё
   сильнее и сильнее, пока не оставалась видна только центральная надпись
   "L2 Scripts", а верх/низ/боковые персонажи уезжали за кадр. */
.hero-banner { background: var(--hdr-bg); position: relative; max-width: 1400px; margin: 0 auto; }
.hero-banner img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: center 40%; }
.hero-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* плавный градиент-вытекание слева/справа в цвет фона шапки (видно на
     экранах шире 1400px, где .hero-zone светлее/темнее по бокам от
     ограниченного по ширине баннера) + прежний фейд к низу */
  background:
    linear-gradient(to right, var(--hdr-bg), transparent 7%, transparent 93%, var(--hdr-bg)),
    linear-gradient(to bottom, transparent 65%, var(--hdr-bg) 100%);
}
nav.topnav { background: var(--hdr-bg); border-top: 1px solid var(--hdr-border); border-bottom: 1px solid var(--hdr-border); }
nav.topnav ul {
  display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0.85rem 1.5rem;
  justify-content: center; flex-wrap: wrap;
}
nav.topnav a { display: flex; align-items: center; gap: 10px; padding: 6px 3px; white-space: nowrap; }
nav.topnav a span {
  font-family: 'Indira K', serif; font-size: 17px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.02em;
  background: linear-gradient(to bottom, #fff3c7 5%, #ffc56d 50%, #63431c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.25px #120904;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.9));
}
nav.topnav a:hover span {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(255,197,109,0.75));
}
nav.topnav a svg {
  width: 20px; height: 20px; flex-shrink: 0; color: #ffc56d;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9));
}
nav.topnav a:hover svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9)) drop-shadow(0 0 9px rgba(255,197,109,0.85)); }

.cols { display: grid; grid-template-columns: 252px 1fr 264px; gap: 0; }
.col-left, .col-right { background: var(--bg); padding: 1.3rem 1.1rem; font-size: 13.5px; }
.col-left a, .col-right a { color: var(--text-link); font-weight: 500; }
.col-left a:hover, .col-right a:hover { color: var(--accent); }
.col-left { border-right: 1px solid var(--border); }
.col-right { border-left: 1px solid var(--border); }
/* Мягкий тональный переход сверху вниз в центральном окне -- продолжение
   той же идеи, что и фейд фона страницы после шапки, только не буквально
   тёмным hdr-bg (там текст, испортило бы читаемость), а уже используемым
   в интерфейсе тёплым тоном --surface-alt, за ту же дистанцию (50vh от
   начала окна, т.к. .col-center начинается сразу после шапки).
   Симметрично снизу -- такой же фейд, но от нижнего края окна вверх, той
   же логикой (и той же дистанцией), что и градиент от нижней seo-line у
   .wrap: два независимых слоя background-image, каждый отсчитывает от
   своего края, высота самого .col-center (растёт вместе с контентом) им
   не важна. */
.col-center {
  padding: 1.6rem 1.8rem;
  background-color: var(--surface);
  background-image:
    linear-gradient(to bottom, var(--surface-alt), transparent 50vh),
    linear-gradient(to top, var(--surface-alt), transparent 50vh);
}

.blk { margin-bottom: 1.3rem; }
.blk-title {
  font-family: var(--serif); font-size: 17.6px; color: #7C4F11;
  font-weight: bold; margin: 0 0 0.7rem; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.blk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.blk li { display: flex; align-items: center; gap: 8px; }
.blk a { font-size: 13px; }

.cat-list { display: flex; flex-direction: column; gap: 5px; }
.cat-list a {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
}
.cat-list .cnt { display: none; color: var(--text-muted); font-size: 12px; }
.cat-list a.active { color: var(--accent); font-weight: bold; }
.cat-list a.active::before { background: var(--accent-hover); }

.ad-strip { display: flex; flex-direction: column; gap: 6px; }
.ad-strip a { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ad-banners { display: flex; flex-direction: column; gap: 8px; }
.ad-banners img { max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--border); }
.vacancy-banner { display: block; }
.vacancy-banner img { width: 100%; display: block; border-radius: var(--radius); border: 1px solid var(--border); }

.blk li img.bullet, .cat-list img.bullet, .ad-strip img.bullet, .announce li img.bullet {
  display: none;
}
.blk li::before, .cat-list a::before, .ad-strip a::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  transform: rotate(45deg); flex-shrink: 0;
}

.announce { margin-bottom: 2.2rem; }
.announce ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.announce li {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.8rem 0.9rem; font-size: 13px; color: var(--text-muted); line-height: 1.4; text-align: center;
}
.announce li strong { display: block; font-family: var(--sans); font-size: 13.5px; font-weight: bold; color: var(--text); margin-bottom: 4px; }
.announce a { color: var(--accent); font-weight: bold; }
.announce a:hover { color: var(--accent-hover); }

h2.section-h {
  font-family: var(--serif); font-size: 16.5px; font-weight: bold;
  color: #fff; background: var(--accent);
  margin: 2.4rem 0 1.3rem; padding: 0.65rem 1rem;
  border-radius: 5px;
  display: flex; align-items: center; gap: 10px;
}
h2.section-h:first-child { margin-top: 0; }
h2.section-h::after {
  content: ""; width: 7px; height: 7px; background: #fff;
  transform: rotate(45deg); flex-shrink: 0; opacity: 0.85;
}
.about p { font-size: 13.5px; color: var(--text); text-align: justify; margin: 0 0 1rem; }
.about .quicklinks { display: flex; justify-content: center; text-align: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 0.4rem; font-weight: bold; }
.about .quicklinks a { color: var(--accent); text-decoration: underline; }
.about .readmore { color: var(--accent-hover); font-weight: bold; text-decoration: underline; }
.about .readmore:hover { color: var(--accent); }
.about .quicklinks a:hover { color: var(--accent-hover); }
h3.sub-h { font-family: var(--serif); font-size: 15.5px; font-weight: bold; color: var(--accent); margin: 1.6rem 0 0.8rem; padding-left: 0.8rem; border-left: 3px solid var(--accent); }
.about-row { display: flex; gap: 1.4rem; margin-bottom: 1.4rem; }
.about-imgs { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; width: 112px; }
.about-imgs img { width: 112px; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.about-row .about-text { flex: 1; min-width: 0; }
.about-row .about-text p:last-child { margin-bottom: 0; }

/* Shared design-system for the 49 not-yet-touched tmpl0-clone templates in
   tmpl1: catalog listing/product cards get the full homepage-style card
   treatment; forms/checkout/account keep their original table/form structure
   (fragile inline JS references fields by name, not position) and only get
   re-themed via these generic classes. */
.breadcrumb { font-size: 12.5px; color: var(--text-muted); margin-bottom: 0.9rem; }
.breadcrumb a { color: var(--text-link); }
.breadcrumb a:hover { color: var(--accent-hover); }

.cat-head { display: flex; gap: 1.2rem; margin-bottom: 1.4rem; align-items: flex-start; }
.cat-head-img { width: 112px; border-radius: var(--radius); border: 1px solid var(--border); flex-shrink: 0; }
.cat-head-body { flex: 1; min-width: 0; }
.cat-desc { font-size: 13.5px; color: var(--text); text-align: justify; margin-bottom: 0.8rem; }
.cat-desc :where(.cont_text2) { font-family: var(--serif); font-weight: bold; color: var(--accent); }
.subcat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.subcat-list a { font-family: var(--serif); font-weight: bold; color: var(--accent); }
.subcat-list a:hover { color: var(--accent-hover); }
.subcat-list .cnt { font-size: 12px; color: var(--text-muted); font-weight: normal; }
.cat-search { flex-shrink: 0; width: 230px; }
.cat-nav { text-align: center; margin: 1rem 0; }
.cat-empty { text-align: center; color: var(--text-muted); padding: 1.5rem 0; }

.pcard { display: flex; flex-direction: column; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.9rem 0.7rem; box-shadow: 0 4px 14px -8px rgba(74,56,35,0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(74,56,35,0.35); }
.pcard-thumb { aspect-ratio: 4/3; background: var(--surface-alt); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; }
.pcard-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pcard-name { font-family: var(--serif); font-size: 13.5px; font-weight: bold; color: var(--accent); margin-bottom: 4px; }
.pcard-name:hover { color: var(--accent-hover); }
.pcard-desc { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; }
.pcard-list-price { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.pcard-price { font-size: 13.5px; color: var(--text); margin-bottom: 6px; }
.pcard-price-val { color: var(--accent-hover); }
.pcard-save { font-size: 11.5px; color: var(--accent-alt); }
.pcard-form { margin-top: auto; }
.pcard-shipping { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.search-panel { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; font-size: 12.5px; }
.search-panel h5 { font-family: var(--serif); color: var(--accent); font-size: 13.5px; margin: 0 0 0.7rem; }
.search-panel .form-row { margin-bottom: 0.6rem; }
.search-panel .form-row label { display: block; color: var(--text-muted); margin-bottom: 3px; }
.search-panel input[type=text], .search-panel select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; font-size: 12.5px; box-sizing: border-box; }
.search-panel .form-row-submit { text-align: right; }

.btn { font-family: var(--sans); font-size: 13px; font-weight: bold; color: #fff; background: var(--accent); border: none; border-radius: var(--radius); padding: 8px 16px; cursor: pointer; transition: background 0.15s ease; }
.btn:hover { background: var(--accent-hover); }

.pd-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pd-breadcrumb-img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius); }
.pd-printable { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12px; }
.pd-printable:hover { color: var(--accent-hover); }
.product-detail { display: flex; gap: 1.6rem; margin-bottom: 1.2rem; align-items: flex-start; }
.product-detail-img { width: 230px; flex-shrink: 0; text-align: center; }
.product-detail-img > img, .product-detail-img .highslide img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.product-detail-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.product-detail-thumbs img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.product-detail-info { flex: 1; min-width: 0; }
.product-detail-info h1 { font-family: var(--serif); color: var(--accent); font-size: 21px; margin: 0 0 0.6rem; }
.pd-list-price { color: var(--text-muted); font-size: 13px; margin-bottom: 4px; }
.pd-price { font-size: 17px; margin-bottom: 6px; }
.pd-price .val { color: var(--accent-hover); }
.pd-save { color: var(--accent-alt); font-size: 13px; }
.pd-meta { font-size: 13px; color: var(--text); margin: 0 0 0.8rem; }
.pd-meta .warn { color: var(--accent-hover); }
.opt-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.8rem; font-size: 13px; }
.opt-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.opt-table tr:nth-child(even) { background: var(--surface-alt); }
.confselect { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; font-size: 13px; font-family: var(--sans); }
.totalPrice { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; font-size: 13px; }
.pd-cart-btn { margin-top: 0.6rem; }
.product-detail-desc { font-size: 13.5px; color: var(--text); text-align: justify; margin-bottom: 1.4rem; }
.pd-related { margin-bottom: 1.4rem; }
.pd-related-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.pd-related-item { text-align: center; width: 112px; font-size: 12px; }
.pd-related-item img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 4px; }
.pd-related-item a { display: block; color: var(--text-link); }
.pd-related-item a:hover { color: var(--accent-hover); }
.pd-related-item .price { color: var(--text-muted); font-size: 11.5px; }
.pd-feedback textarea, .pd-feedback input[type=text] { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font-size: 13px; font-family: var(--sans); }
.pd-feedback .warn { color: var(--accent-hover); }
.pd-sent-ok { color: var(--accent); }
.pcard-soldout { color: var(--accent-hover); font-weight: bold; font-size: 11.5px; }
.pd-printable-wrap { margin: 0 0 0.8rem; }

.compare-table { width: 95%; border-collapse: collapse; margin: 0.6rem 0 1.4rem; font-size: 13px; }
.compare-table td { border: 1px solid var(--border); padding: 8px; vertical-align: top; }
.compare-table .compare-label { background: var(--surface-alt); font-family: var(--serif); font-weight: bold; color: var(--accent); }
.compare-price { color: var(--accent-hover); }

.pricelist-wrap { margin-bottom: 1.4rem; text-align: center; }
.pricelist-h { font-family: var(--serif); color: var(--accent); font-size: 20px; margin: 0 0 0.8rem; }
.pricelist-table { border-collapse: collapse; margin: 0 auto; font-size: 13px; text-align: left; }
.pricelist-table td { border: 1px solid var(--border); }
.pricelist-table a { color: var(--text-link); }
.pricelist-table a:hover { color: var(--accent-hover); }

.cart-title { font-family: var(--serif); color: var(--accent); font-size: 15px; }
.cart-clear { color: var(--text-muted); font-size: 12.5px; text-decoration: underline; }
.cart-clear:hover { color: var(--accent-hover); }
.cart-table { border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); }
.cart-table td { border: 1px solid var(--border); padding: 8px; font-size: 13px; }
.cart-table-head { background: var(--accent); color: #fff; font-weight: bold; }
.cart-table-head td { border-color: var(--accent); }
.cart-total-row { background: var(--surface-alt); font-weight: bold; }
.cart-table input[type=text] { border: 1px solid var(--border); border-radius: var(--radius); padding: 3px 5px; width: 50px; }
.cart-table .cat, .cat { font-family: var(--serif); color: var(--accent); }

.checkout-h1 { font-family: var(--serif); color: var(--accent); font-size: 21px; margin: 0 0 0.3rem; }
.checkout-table { border-collapse: collapse; }
.checkout-table td { padding: 6px 8px; }
.checkout-table input[type=text], .checkout-table select, .checkout-table textarea { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; font-family: var(--sans); font-size: 13px; }

.account-h1 { font-family: var(--serif); color: var(--accent); font-size: 22px; text-align: center; margin: 0 0 1rem; }
.account-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; }
.account-table { width: 100%; border-collapse: collapse; }
.account-table td { padding: 14px; vertical-align: top; font-size: 13px; }
.account-table h3 { font-family: var(--serif); color: var(--accent); font-size: 15.5px; margin: 0 0 0.6rem; }
.account-table .myAccount_bottomright, .account-table .myAccount_bottom { border-top: 1px solid var(--border); }
.account-table .myaccount_tab_bottom, .account-table .myaccount_tab_top { background: var(--surface-alt); font-weight: bold; text-align: center; }
.account-table .myaccount_tab_bottom a, .account-table .myaccount_tab_top a { color: var(--text-link); }
.account-table .myaccount_tab_bottom a:hover, .account-table .myaccount_tab_top a:hover { color: var(--accent-hover); }
.account-table .faq { text-align: center; background: var(--surface); }
.account-subtable { width: 100%; margin: 0.4rem 0; background: var(--surface-alt); border-radius: var(--radius); }
.account-subtable-head { background: var(--surface-alt); }
.account-subtable-label { font-family: var(--serif); color: var(--accent); font-weight: bold; font-size: 13px; }
@media (max-width: 700px) {
  .product-detail { flex-direction: column; }
  .product-detail-img { width: 100%; }
}

.cat-grid-table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.cat-grid-table td { width: 50%; padding: 8px 8px 8px 0; vertical-align: top; border-bottom: 1px solid var(--accent); }
.cat-grid-table a { font-family: var(--serif); font-size: 16px; font-weight: bold; letter-spacing: 0.01em; color: #7C4F11; }
.cat-grid-table a:hover { color: var(--accent-hover); }
.cat-grid-table .cnt { font-weight: normal; color: var(--text-muted); font-size: 13px; }
.cat-grid-table a.subcat { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-link); display: inline-block; margin: 2px 0; }
.cat-grid-table a.subcat:hover { color: var(--accent); }

/* STRING_GREETINGS (languages/russian.php) now uses the same semantic markup
   as the mockup (h2.section-h, .announce, .about/.about-row/.about-imgs/.about-text,
   .quicklinks, .readmore) so it renders as real cards, not just recolored old tags.
   Every word of text and every href inside the constant is unchanged -- only the
   surrounding tags were swapped for the new structure; admin still edits the
   same constant, same file, just wraps new "Релиз..." lines in <li> now. */
/* Reverted 2026-08-01: STRING_GREETINGS (languages/russian.php) is a SHARED
   constant read by both tmpl0's and tmpl1's home.tpl.html -- restructuring its
   markup earlier broke the public/tmpl0 view (new tags had no matching rules
   in templates/style0.css). Restored the constant to its original raw markup
   and reskin it here via its *existing* tags/classes only, same as the very
   first approach -- this is the only safe way to touch its look without a
   second stylesheet leaking into tmpl0's real-visitor rendering. */
.greetings-block { font-family: var(--sans); color: var(--text); font-size: 13.5px; }
.greetings-block .cont_text2 {
  font-family: var(--serif); font-weight: bold; color: var(--accent); font-size: 14px;
}
.greetings-block table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.greetings-block td { font-size: 13.5px; color: var(--text); vertical-align: top; }
.greetings-block p { margin: 0 0 0.8rem; text-align: justify; }
.greetings-block img { border-radius: var(--radius); }
.greetings-block a { color: var(--accent); }
.greetings-block a:hover { color: var(--accent-hover); }
.greetings-block u { text-decoration: underline; }

.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem 1.2rem; margin-bottom: 1rem; }
.offer-card {
  text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.8rem 0.6rem;
  box-shadow: 0 4px 14px -8px rgba(74,56,35,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.offer-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(74,56,35,0.35); }
.offer-thumb {
  aspect-ratio: 4/3; background: var(--surface-alt); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; color: var(--text-muted); margin-bottom: 8px;
}
.offer-thumb img { width: 100%; height: 100%; object-fit: contain; }
.offer-card .pname { font-family: var(--serif); font-size: 13.5px; font-weight: bold; color: var(--accent); margin-bottom: 2px; }
.offer-card .oprice { font-size: 12.5px; color: var(--text-muted); }

.cart-box { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; font-size: 13px; color: var(--text-muted); text-align: center; }

.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-list .item { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.news-list .item:last-child { border-bottom: none; padding-bottom: 0; }
.news-list .d { font-size: 12px; color: var(--accent-alt); font-weight: bold; margin-bottom: 2px; }
.news-list .t { font-size: 13px; color: var(--text-link); }
.news-list .t a:hover { color: var(--accent-hover); }
.news-list .t a.more { font-size: 12px; color: var(--accent); }
.news-list .t a.more:hover { color: var(--accent-hover); }
/* Общий контейнер для кнопки языка и иконок ТГ/Тимс -- в один ряд, справа
   от кнопки языка, а не под ней (как было раньше), чтобы раскрывающееся
   меню языков не наезжало на иконки при открытии. */
.hero-topleft {
  position: absolute; left: 50px; top: 20px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
}
.lang-select {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; color: var(--hdr-text);
  background: rgba(23,16,9,0.78); border: 1.5px solid var(--hdr-border); border-radius: var(--radius);
  padding: 12px 17px; cursor: pointer;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,0.5);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-select:hover { border-color: var(--hdr-accent); color: #fff; }
.lang-select .lang-code { font-weight: bold; letter-spacing: 0.03em; }
.lang-select .arrow { color: var(--hdr-accent); font-size: 11px; transition: transform 0.15s ease; }
.lang-select.open .arrow { transform: rotate(180deg); }

/* Своё выпадающее меню языков (в стиле сайта) вместо стандартного попапа
   Google -- он не поддавался ни стилизации, ни позиционированию после того,
   как мы спрятали исходный виджет. Сам виджет Google Translate по-прежнему
   инициализируется (см. #google_translate_element ниже в разметке,
   вынесен за экран) -- переключение языка идёт через cookie googtrans,
   которую этот виджет читает при перезагрузке (см. setLang() в конце
   файла), а не через клик по его собственному select/попапу. */
.lang-select .lang-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: rgba(23,16,9,0.97); border: 1.5px solid var(--hdr-border); border-radius: var(--radius);
  min-width: 170px; padding: 6px; box-shadow: 0 10px 24px -6px rgba(0,0,0,0.65);
  z-index: 20; cursor: default;
}
.lang-select.open .lang-menu { display: block; }
.lang-select .lang-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 13.5px; font-weight: 500;
  color: var(--hdr-text); border-radius: 4px; white-space: nowrap;
}
.lang-select .lang-menu a:hover { background: rgba(255,255,255,0.08); color: var(--hdr-accent); }
.lang-select .lang-menu .lm-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 1px 4px; font-size: 10.5px; font-weight: bold; letter-spacing: 0.02em;
  color: var(--hdr-accent); border: 1px solid var(--hdr-border); border-radius: 3px;
  background: rgba(255,255,255,0.04); flex-shrink: 0;
}
/* Классическая защита от сдвига страницы, который Google Translate иногда
   добавляет через inline body.style.top при показе своей уведомляющей
   плашки сверху ("Переведено на английский..."); саму плашку не прячем --
   у неё сейчас непредсказуемое имя класса (меняется версиями виджета), а
   визуально она не ломает вёрстку, просто временная стандартная полоска
   Google поверх сайта. */
body { top: 0 !important; }
.hero-social {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 12px;
}
.hero-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(23,16,9,0.78); border: 1.5px solid var(--hdr-border);
  color: var(--hdr-text); font-size: 22px;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,0.5);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-social a:hover { border-color: var(--hdr-accent); color: var(--hdr-accent); transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(0,0,0,0.6); }

/* Мобильная панель (поиск + бургер) и раскрывающееся мобильное меню --
   скрыты на десктопе, включаются в @media (max-width: 980px) ниже. */
.mobile-bar { display: none; }
.burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0; padding: 0; cursor: pointer;
  background: rgba(23,16,9,0.78); border: 1.5px solid var(--hdr-border); border-radius: var(--radius);
}
.burger span { display: block; width: 20px; height: 2px; background: var(--hdr-text); position: relative; transition: background 0.15s ease; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--hdr-text);
  transition: transform 0.2s ease, top 0.2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger:hover { border-color: var(--hdr-accent); }
.burger.active span { background: transparent; }
.burger.active span::before { top: 0; transform: rotate(45deg); }
.burger.active span::after { top: 0; transform: rotate(-45deg); }
.mob-only-item { display: none; }

/* Сворачиваемые блоки (Акции/Каталог/Новости на мобильном) -- на десктопе
   ведут себя как обычный текст, .mob-acc-head/.mob-acc-body ничего не меняют
   без @media ниже. */
.mob-acc-head { position: relative; }
.mob-acc-body { }

.search-box-side { display: flex; gap: 6px; width: 100%; }
.search-box-side form { display: flex; gap: 6px; width: 100%; }
.search-box-side input.search {
  flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 9px; font-size: 12.5px; font-family: var(--sans); background: var(--surface); color: var(--text);
}
.search-box-side input.searchb {
  margin: 0; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: var(--radius); padding: 6px 12px; font-size: 12.5px; font-family: var(--sans); cursor: pointer; flex-shrink: 0;
}
.search-box-side input.searchb:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.subscribe { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.subscribe input { display: block; margin-top: 6px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font-family: var(--sans); font-size: 12.5px; }

footer.bottom { background: var(--bg); border-top: 1px solid var(--border); padding: 1rem 1.5rem; text-align: center; }
.bottomnav { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; font-size: 13px; margin-bottom: 0.6rem; }
.copy { font-size: 12px; color: var(--text-muted); }

/* ==========================================================================
   Broad first pass for every page not yet individually redesigned.
   All other 58 tmpl0/tmpl1 templates render inside .col-center via
   {include file=$main_content_template} and still use style0.css's shared
   classes untouched. These overrides remap those SAME classes to the new
   palette/type so the whole site reads as one theme immediately, without
   editing any of those templates' markup or Smarty logic. Per-page markup
   polish (own layout, own new classes) happens later, file by file. */
/* :where() keeps every rule below at (0,1,0) specificity -- just ".col-center" --
   so it can NEVER outrank a more specific rule elsewhere in this file (like
   h2.section-h, .cat-grid-table a, .about .quicklinks a, etc.), regardless of
   which comes first in the file. Without :where() this silently broke
   h2.section-h's white text (tied specificity, later source order won),
   rendering "Каталог"/"Спец. предложения" as invisible gold-on-gold text. */
.col-center :where(a) { color: var(--text-link); }
.col-center :where(a):hover { color: var(--accent-hover); }
.col-center :where(.titler),
.col-center :where(.titleright),
.col-center :where(a.titleright) {
  font-family: var(--serif); color: var(--accent); font-weight: bold;
  text-transform: none;
}
.col-center :where(.blacktitle) { font-family: var(--sans); color: var(--text); font-weight: bold; text-transform: none; }
.col-center :where(.redbold) { color: var(--accent-hover); }
.col-center :where(.blacker), .col-center :where(.copy), .col-center :where(.news) { color: var(--text); }
.col-center :where(.cont_text2), .col-center :where(.my_account) { font-family: var(--serif); color: var(--accent); }
.col-center :where(.date) { color: var(--accent-alt); }
.col-center :where(a.thispage) {
  background: var(--accent); color: #fff; background-image: none;
  padding: 3px 10px; border-radius: var(--radius); line-height: normal;
}
.col-center :where(a.navi) {
  color: var(--text-link); background-image: none; padding-left: 0;
  text-decoration: underline; line-height: normal;
}
.col-center :where(a.navi):hover { color: var(--accent-hover); text-decoration: none; }
.col-center :where(.search), .col-center :where(.login) {
  background-image: none; border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--surface-alt); color: var(--text);
}
.col-center :where(.searchb) { color: var(--accent); border-bottom-color: var(--accent); }
.col-center :where(.searchb):hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.col-center :where(table) { border-color: var(--border); }
.col-center :where(h1, h2, h3, h4) { font-family: var(--serif); color: var(--accent); }

@media (max-width: 980px) {
  .cols { grid-template-columns: 1fr; }

  /* Мобильная панель поиск+бургер и раскрывающееся меню вместо статичной
     строки topnav (см. index.tpl.html: mobBurgerToggle()/mobToggle()). */
  .mobile-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0.7rem 1rem; background: var(--hdr-bg); border-top: 1px solid var(--hdr-border);
  }
  .mobile-bar .search-box-side input.search { background: rgba(255,255,255,0.07); border-color: var(--hdr-border); color: var(--hdr-text); }
  .mobile-bar .search-box-side input.search::placeholder { color: var(--hdr-text-muted); }
  .burger { display: inline-flex; }
  .mob-only-item { display: block; }

  nav.topnav { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; border-top: none; }
  nav.topnav.open { max-height: 640px; }
  nav.topnav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.4rem 1.2rem 1rem; }
  nav.topnav li { border-bottom: 1px solid var(--hdr-border); }
  nav.topnav li:last-child { border-bottom: none; }
  nav.topnav a { padding: 10px 3px; }

  /* Переупорядочивание блоков: display:contents делает .col-left/.col-right
     "прозрачными", так что каждый вложенный .blk становится отдельным grid-
     элементом .cols и получает свой order -- порядок именно по смыслу
     (сначала категории, затем основной контент, затем остальное), а не
     "весь левый столбец -> весь центр -> весь правый", как было раньше.
     .col-center отдельного contents не получает -- он один блок, ему order
     назначается напрямую. */
  .col-left, .col-right { display: contents; }
  .col-center { order: 2; }

  .blk { padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; margin-bottom: 0; border-top: 1px solid var(--border); }

  .blk-cats { order: 1; }
  .blk-other-left { order: 3; }
  .blk-news { order: 4; }
  .blk-translate { order: 5; }

  /* Реклама/счётчики, партнёрский блок и баннер вакансий в мобильной версии
     не нужны; десктопный блок поиска заменён на .mobile-bar выше. */
  .blk-ads, .blk-partners, .blk-search-desktop, .vacancy-banner { display: none; }

  /* Единый акцентный стиль заголовков всех разделов в мобильной версии --
     как h2.section-h ("Релизы"/"О проекте"/"Каталог" в главном блоке):
     золотая плашка, белый жирный текст с засечками. Раньше .blk-title был
     обычным текстом с подчёркиванием и терялся на фоне остальных заголовков
     страницы. */
  .blk-title {
    font-family: var(--serif); font-size: 15px; font-weight: bold;
    color: #fff; background: var(--accent); border-bottom: none;
    padding: 0.6rem 0.9rem; margin: 0 0 0.9rem; border-radius: 5px;
    display: flex; align-items: center; gap: 8px;
  }
  .blk-title::after {
    content: ""; width: 6px; height: 6px; background: #fff;
    transform: rotate(45deg); flex-shrink: 0; opacity: 0.85;
  }

  /* Сворачиваемые блоки: свёрнуты по умолчанию, разворачиваются по тапу
     (mobToggle()) -- переход по ссылке-якорю (#mob-categories/#mob-news из
     мобильного меню) тоже разворачивает нужный блок, но через JS
     (mobExpandTarget() в index.tpl.html), а не через CSS :target: :target
     держит блок открытым, пока хэш в адресной строке не сменится, и не даёт
     свернуть его обратно тапом -- ровно этот баг был раньше. Специфичность
     .blk-title.mob-acc-head::after выше, чем у .blk-title::after выше, так
     что индикатор +/- всегда побеждает ромбик на аккордеонах. */
  .mob-acc-head { cursor: pointer; padding-right: 2.2rem; position: relative; }
  .blk-title.mob-acc-head::after { content: "+"; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); width: auto; height: auto; background: none; font-size: 20px; color: #fff; opacity: 1; }
  .blk-title.mob-acc-head.open::after { content: "\2212"; }
  .mob-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .mob-acc-body.open { max-height: 2000px; }

  /* "Каталог" в мобильном меню -- в точности как каталог в центральной
     колонке десктопа (.cat-grid-table): 2 колонки, жирные названия
     категорий засечкой с количеством товаров, без ромбиков-буллитов;
     <br> из шаблона скрыт -- сетку строит сам grid, а не переносы строк.
     Вложенные подкатегории (только внутри конкретной категории) -- мельче,
     как .cat-grid-table a.subcat. */
  #mob-categories .cat-list {
    display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: 0;
  }
  #mob-categories .cat-list br { display: none; }
  #mob-categories .cat-list a::before { content: none; }
  #mob-categories .cat-list a.cat-toplevel {
    display: block; font-family: var(--serif); font-size: 16px; font-weight: bold; letter-spacing: 0.01em;
    color: #7C4F11; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--accent);
  }
  #mob-categories .cat-list a.cat-toplevel:hover { color: var(--accent-hover); }
  #mob-categories .cat-list .cnt { display: inline; font-weight: normal; color: var(--text-muted); font-size: 13px; }
  #mob-categories .cat-list a.subcat {
    display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-link);
    padding: 2px 8px 2px 0.6rem;
  }
  #mob-categories .cat-list a.subcat:hover { color: var(--accent); }
  #mob-categories .cat-list a.cat-toplevel.active,
  #mob-categories .cat-list a.subcat.active { color: var(--accent); }
}
@media (max-width: 560px) {
  .announce ul { grid-template-columns: 1fr; }
  .about-row { flex-direction: column; }
  .about-imgs { flex-direction: row; width: auto; flex-wrap: wrap; }
  .about-imgs img { width: 90px; }
  nav.topnav ul, .col-center, footer.bottom { padding-left: 1rem; padding-right: 1rem; }
  .hero-topleft { left: 1rem; gap: 10px; }
  .cat-grid-table td { display: block; width: 100%; }
}