@charset "windows-1251";
html {
	height: 100%; /* Высота элемента */
	background-color: #fff;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed;
	padding:0px;
	margin:0px;
   }

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

a img {
	border:none;
}

p {
	margin: 0; /* Обнуляем отступы */
	padding: 0px 5px 5px 5px;
   }

.bg {
	margin: 0px; /* Обнуляем отступы на странице */
	padding:0px;
	height: 100%;
	background-image: none;
}

.left {
	background-color:#ccc;
	background:none; /**/
	border-right:2px solid #800000; /**/
/*	border-left: 1px dashed #000; /**/
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	vertical-align: top;
	margin-bottom: 15px;
	padding-bottom: 15px;
	width: 257px;/*	 box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8); /**/
	height: 100%;
}

.left2 {
	background-color:#ccc;
	background:none; /**/
	border-right:2px solid #800000; /**/
/*	border-left: 1px dashed #000; /**/
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
	margin-bottom: 15px;
	padding-bottom: 15px;
	width: 210px;/*	 box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8); /**/
	height: 100%;
}

.leftmenu {
/*	border:solid 1px #000;/**/
	text-align:center;
	width:252px;
	margin-right:5px;
}

.mainwindow1 {
	height:100%;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	text-align: center;
	padding: 15px;
	vertical-align: top;
	margin-bottom: 15;
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8);
	background-image: none;
}

.mainwindow2 {
	height:100%;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	text-align: center;
	vertical-align: top;
	margin-bottom: 15;
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8);
	background-image: none;
	background-color: #FFF;
}

.blockfiltr {
	border: solid 1px #000;
	width: 100%;
	background-image:url(images/bgfiltr.png);
	-moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
	-webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
	-khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
	border-radius: 10px; /* закругление углов для всех, кто понимает */
	background-repeat: no-repeat;
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8);
}

#linknew {
	position:relative;
	z-index:250;
	line-height: -50;
	top: -158px;
	left: 112px;
	width:66;
	height:22;
}

#linkucenka {
	position:relative;
	z-index: 255;
	line-height: -50;
	top: -248px;
	left: -5px;
	width:59;
	height:24;
}

.prodlinkpic {
	text-align:left;
	height: 205px;
	width: 160px;
	display: block;
	position: relative;
	text-decoration: none;
}

.linkurl {
	height:0px;
	text-decoration: none;
}

.photocount {
	color:#00F;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-decoration: none;
	background-color: #CFF;
	display: block;
	text-align: left;
	top: -18px;
	position: relative;
	font-weight: bold;
	vertical-align: bottom;
	font-style: normal;
	font-variant: normal;
	background-color: rgba(255, 255, 255, 0.7);
}

.mainwindow {
	height:100%;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	text-align: center;
	padding: 15px;
	vertical-align: top;
	margin-bottom: 15;
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8);
	background-image: none;
}

.mainmenu {
	background-color:#ccc;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	text-align: center;
	width:100%;
	border:1px solid #000;
	padding-left:5px;
	color: #F90;
}

.informtabletitle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	background-color: #F00;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	margin: 3px;
	padding: 3px;
}

.informtabletitle2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	margin: 5px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 25px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #930;
}

.informtabletext {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000;
	text-decoration: none;
	background-color: #FFF;
	text-align: left;
	vertical-align: top;
	padding: 15px;
}

.categorylistitem {
	background:#FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	text-decoration: none;
	display: block;
	padding: 3px;
	border: 1px solid #930;
	margin-top: 7px;
	margin-right: 3px;
	margin-bottom: 7px;
	margin-left: 3px;
	text-align: left;
	vertical-align: middle;
}

.articleslist {
	background:#FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	display: block;
	text-align: left;
	vertical-align: middle;
	padding: 3px;
}

.articletext {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	text-decoration: none;
	background-color: #FFF;
	text-align: left;
	vertical-align: top;
	margin: 5px;
	padding: 5px;
	height: 100%;
	width: 100%;
}

.mainbut
{
	background-image:none;
	width: 100%;
	height: 25px;
	vertical-align:middle;
}
.mainbutton
{
	width: 100px;
	color:#FFF;
	height: 100%; /* */
	background-image: url(images/button.jpg);
}

/*Стиль главного меню (ссылки)*/
a.mainbutton:link {
	text-decoration: none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	width:100%;
	height:25px;
	/*	line-height: 0px; /* */
	/*	display: block;/*Внутр отсутп текста ссылки от лев края яч*/
	color: #FFF; /* Внешний отступ */
	/*	border: 1px solid #FFF; /* */
	display: block;
	background-image: url(images/button.jpg);
	text-align: center;
	vertical-align: middle;
	line-height: 20px;
}

/* Стиль посещенной ссылки*/
a.mainbutton:visited {
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-decoration: none;
}

/* Стиль ссылки при наведении мышью*/
a.mainbutton:hover {
	text-decoration: none;
	color: #FF0;
	background-image: url(images/button.jpg);
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
/*Стиль нажатой (активной) ссылки*/
a.mainbutton:active {
	text-decoration: none;
	/*	font-weight: bold; */
	color: #FFF;
	background-image: url(images/butpress.jpg);
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	vertical-align: middle;
	text-align: center;
	display: table;
}

/*Стиль заголовка левого меню категорий*/
.leftmenutitle {
	color: #000;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*Стиль главного меню (ссылки)*/
a.leftmenu:link {
	text-decoration: none;
	background-image:url(images/line01_25x22.png)
	font-family: Verdana, Geneva, sans-serif;
	font-size:16px;
	text-align:right;
	width:100%;
	display: block;/*Внутр отсутп текста ссылки от лев края яч*/
	color: #000; /*Подчеркивание у ссылок - нет*/
	vertical-align: middle;
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-bottom:5px;
	height: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-family: Verdana, Geneva, sans-serif;
	font-style: normal;
	font-weight: normal;
}

/* Стиль посещенной ссылки*/
a.leftmenu:visited {
	text-decoration: none;
	/*	background-image:url(images/line01_25x22.png);*/
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	text-align:right;
	width:93%;
	/*	border:1px solid #333;*/
	display: block;/*Внутр отсутп текста ссылки от лев края яч*/
	color: #000; /*Подчеркивание у ссылок - нет*/
	vertical-align: middle;
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-bottom:5px;
	font-style: normal;
	font-weight: normal;
}
/* Стиль ссылки при наведении мышью*/
a.leftmenu:hover {
	text-decoration: none;
	color: #000;
	background-repeat: no-repeat;
	font-size:16px;
	font-style: normal;
	font-weight: bold;
	text-align: right;
	display: block;
	font-family: Verdana, Geneva, sans-serif;
}
/*Стиль нажатой (активной) ссылки*/
a.leftmenu:active {
	text-decoration: none;
	font-weight: normal;
	color: #900;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-style: normal;
	text-align: right;
	background: none;
}

.titlesubcat {
	background:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #600;
}

.subcatlist {
	text-align:left;
	width: 100%;
	padding-left: 50px;
	background-color: #99000;
	background-image: none;
	border: 3px solid #930;
	padding-right: 50px;
}

.subcatelem {
	background:none;
	text-decoration:none;
	padding-left: 40px;
}

.navititle {
	color: #C00;
	margin-bottom:0px;
	padding-bottom:0px;
	background-color: #FFF;
}
a.navititle {
	color:#C00;
	text-decoration: none;
	background-color: #FFF;
}

.pricelist {
	border: 1px;
	border-color:#F30;
	border-style:solid;
	height:100%;
	width: 100%;
}

.brand {
	color:#FFF;
	border: 1px;
	border-color:#F00;
	border-style:solid;
	background:#F00;
	text-align:center;
	margin: 0px;
	margin-top: 3px;
	font-weight:bold;
	height:100%;
	width: 100%;
}

.prod {
	text-align:left;
	height:100%;
	background-color: #FFF;
/*	border: solid 3px #00C;/**/
	margin: 0px;
	padding: 5px;
	width: 170px;
}

.tt {
/*	width: 100%;/**/
/*	border: solid 1px #F00;*/
}

.prodtextblock {
	margin-top:5px;
	text-align: left;
}

.prodnm a{
	color:#009;
	font-weight:bold;
	margin-top: 5px;
	margin-left: 5px;
	text-align:left;
	text-decoration:none;
}

.prodpicframe {
	width: 170px;
	height: 220px;
	/*	border:none;*/
	border: 1px #000 solid;
	margin-top: 5px;
}

.pict {
	width: 160px;
/*	border:none;*/
/*	border: 1px #933 solid;/* */
/*	margin-top:5px;*/
}

.prodinfoleft {
	border: none;
	height:100%;
	width:100%
}

.prodbigpic {
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #F00;
	padding: 10px;
	
	box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.8);
}

.prodinfprice {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #900;
	width: 100%;
	height: 30px;
	text-align: left;
	vertical-align: top;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-weight: bold;
}

.prodart a{
	color:#000;
	font-size:10px;
	text-align:left;
	margin-left: 5px;
	text-decoration:none;
}

.prodprice a{
	color:#C30;
	font-size:14px;
	font-weight:bold;
	margin-top: 3px;
	text-align:left;
	margin-left: 5px;
	text-decoration:none;
}

.oldprodprice a{
	color:#000;
	font-size:12px;
	font-weight:normal;
	margin-top: 3px;
	text-align:left;
	margin-left: 5px;
	text-decoration:line-through;
	position:relative;
	top:-5px;
}

.newprodprice a{
	color:#F00;
	font-size:14px;
	font-weight:bold;
	margin-top: 3px;
	text-align:left;
	margin-left: 5px;
	text-decoration:none;
	position:relative;
	top:-10px;
}

.oldprodprice1{
	color:#000;
	font-size:12px;
	font-weight:normal;
	text-decoration: line-through;
}

.newprodprice1{
	color:#F00;
	font-size:14px;
	font-weight:bold;
}

.newprodpricepercent a{
	color:#F00;
	font-size:14px;
	font-weight:bold;
	margin-top: 3px;
	text-align:left;
	margin-left: 5px;
	text-decoration:none;
	text-align:left;
	position:relative;
	top:-198px;
	left: -8px;
}

.newprodpricepercent1 {
	color:#F00;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	vertical-align: top;
}

.viewproduct {
	height: 400px; /* Высота рамки товара */
	width:100%;
}

.tovarname {
	height: 40px;
	color:#000;
	font-size:16px;
	font-weight:bold;
	text-align:left;
	border-bottom-width: 3px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #F00;
}

.tovardata {
	height:100%;
	width:100%;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #903;
	border-right-color: #903;
	border-bottom-color: #903;
	border-left-color: #903;
}

.tovarpicframe {
	height:100%;
	width:350px;
	background-color: #FFF;
	border: none;
}

.tovarinfoframe {
	background-color:#FFF;
	height:100%;
	text-align:left;
	vertical-align: top;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	
}

.pstrnav {
	padding: 0px 10px 20px 15px;
	color:#424242;
}

.pstrnav a{
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
	font-size:11px;
	color:#245E93; 
	text-decoration:underline;
}

.listsel {
	width: 170px;
}

.tovarinfo2 {
	height: 250px;
	text-align: left;
	vertical-align: top;
	border-bottom-width: 3px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #F00;
	width: 100%;
}

.tovardescript {
	padding-left: 15px;
	letter-spacing: normal;
	text-align: left;
	vertical-align: top;
	word-spacing: normal;
	padding-top: 15px;
	height: 100%;
	width: 100%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-width: 3px;
	border-bottom-color: #F00;
}

.tavarinfoframe1 {
	height: 100%;
	width: 100%;
	text-align: left;
	vertical-align: top;
}
.headtable {
	border:none;
	width: 100%;
	height: 105px;
	padding:0px;
	margin:0px;
}

.headtab2 {
	border:none;
	height: 100px;
	width: 100%;
	background-image:url(images/head.png);
	color:#FFF;
	text-align:center;
	background-repeat: no-repeat;
	margin: 0px;
	padding-bottom: 10px;
	
/*	border:1px solid #FFF;*/
}

.footerbg {
	background:url(images/footerbg.jpg);
	background-repeat:repeat-x;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#FFF;
	text-align:center;
	vertical-align:bottom;
}

.headlfrt {
	border:none;
	background-image: url(images/lfrt.png);
	background-repeat: repeat-x;
}

.headcenter {
	width: 1000px;
	height: 100%;
	margin:0px;
	padding:0px;
	vertical-align:top;
}

.headlogo {
	width: 257px;
	height:100%;
	border:none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.headtdbt {
	border:none;
	/*	border:solid 1px #FFF; /**/
	width:100%;
	height:54px;
	background:none;
	margin:0px;
	padding:0px;
	border:0;
	text-decoration: none;
}

.headbuttd {
	height: 25px;
}

.yesnobuttons {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	background-color: #EEE;
	border: 1px solid #000;
	text-decoration: none;
	margin: 5px;
	padding: 3px;
}

.otziv {
	background:#FFF;
}

.otzivhead {
	text-align:left;
	color:#900;
	font-size:16px;
	font-weight:bold;
	margin:5px;
}


/* ===== PHP 8.4 migration / responsive layer v1 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; }
body { min-width: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.site-container { width: min(1000px, 100%); margin: 0 auto; padding: 0 5px; }
.site-layout { display: grid; grid-template-columns: 257px minmax(0, 1fr); gap: 5px; align-items: stretch; }
.site-header { width: 100%; }
.headcenter { width: min(1000px, 100%); margin: 0 auto; }
.headtab2 { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.headlogo { width: 257px; flex: 0 1 257px; display: flex; align-items: center; justify-content: center; }
.mainbut { width: auto; height: auto; flex: 1 1 600px; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
a.mainbutton:link, a.mainbutton:visited { width: 100px; min-height: 25px; height: auto; line-height: 20px; }
.left { width: auto; min-width: 0; }
.leftmenu { width: 100%; max-width: 252px; margin: 0 auto; }
a.leftmenu:link, a.leftmenu:visited { width: 100%; overflow-wrap: anywhere; }
.mainwindow1, .mainwindow2, .mainwindow { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.mainwindow1 table, .mainwindow2 table, .mainwindow table { max-width: 100%; }
.mainwindow1 td, .mainwindow2 td, .mainwindow td, .articletext td, .informtabletext td { max-width: 100%; overflow-wrap: anywhere; }
.site-footer { width: min(1000px, 100%); margin: 15px auto 0; text-align: center; }
.footer-logo img { max-width: min(100%, 300px); }
.footer-counters { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center; padding: 5px; }
.counter-img { width: 88px; height: 31px; max-width: 88px; }
@media (max-width: 768px) {
  .site-container { padding: 0 8px; }
  .site-layout { grid-template-columns: 1fr; gap: 10px; }
  .left { order: 1; border-right: 0; border-bottom: 2px solid #800000; padding-bottom: 8px; }
  .mainwindow1, .mainwindow2, .mainwindow { order: 2; padding: 10px; box-shadow: none; }
  .headtab2 { padding: 5px; background-size: cover; }
  .headlogo { flex-basis: 100%; width: 100%; }
  .mainbut { flex-basis: 100%; width: 100%; }
  a.mainbutton:link, a.mainbutton:visited { flex: 1 1 140px; width: auto; margin: 2px; min-height: 34px; line-height: 30px; }
  .leftmenutitle { margin: 8px 0; }
  .leftmenu { max-width: 100%; }
  a.leftmenu:link, a.leftmenu:visited { text-align: center; padding: 8px 5px; font-size: 15px; }
  .prod, .prodpicframe, .pict, .tovarpicframe, .tovarinfoframe { max-width: 100%; }
  .tovarpicframe { width: 100%; height: auto; }
  .tovarname { height: auto; min-height: 40px; }
}
@media (max-width: 420px) {
  body { font-size: 14px; }
  .mainwindow1, .mainwindow2, .mainwindow { padding: 7px; }
  a.mainbutton:link, a.mainbutton:visited { flex-basis: 100%; width: 100%; margin: 2px 0; }
  .leftmenutitle { font-size: 15px; }
}

/* ===== Mobile layout fix v3 ===== */
@media (max-width: 768px) {
  /* The old desktop header had a fixed 100px height.
     On mobile the logo + vertical menu need natural height,
     otherwise the content below slides underneath the menu. */
  .headtab2 {
    height: auto;
    min-height: 100px;
    overflow: visible;
  }
  .site-header {
    height: auto;
  }
  .headcenter {
    height: auto;
  }
  .mainbut {
    position: static;
    height: auto;
  }
}

/* v5: desktop header must reserve enough vertical space for the logo/menu.
   Mobile image must keep the original 667x436 aspect ratio. */
.headtab2 {
  min-height: 125px;
}

.mainwindow1 img,
.mainwindow2 img,
.mainwindow img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 667 / 436;
  object-fit: contain;
}

@media (max-width: 768px) {
  .headtab2 {
    min-height: 100px;
  }

  .mainwindow1 img,
  .mainwindow2 img,
  .mainwindow img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 667 / 436;
    object-fit: contain;
  }
}

/* v6: desktop only - lower the top navigation slightly.
   Mobile layout is left unchanged because it is already correct. */
@media (min-width: 769px) {
  .mainbut {
    position: relative;
    top: 12px;
  }
}

/* v8: desktop width refinement.
   Keep the original mobile layout untouched. On wide screens the content
   area may grow, while the 1000px header artwork is scaled to the same width.
   The main index image is allowed to use the additional content width. */
@media (min-width: 769px) {
  .site-container,
  .headcenter,
  .site-footer {
    width: min(1200px, 100%);
  }

  .headtab2 {
    min-height: 126px;
    background-size: 1200px auto;
  }

  .mainwindow1 > p > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 667 / 436;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }
}

/* v9: the slogan from images/head.png is replaced by responsive HTML text
   on narrow screens so it cannot run outside the viewport. */
.header-slogan {
  display: none;
}

@media (max-width: 768px) {
  .headtab2 {
    position: relative;
    background-image: none;
    background-color: #7b1717;
    padding-top: 5px;
  }

  .header-slogan {
    display: block;
    width: 100%;
    padding: 7px 12px 9px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: clamp(11px, 3.2vw, 16px);
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
}

/* v11: use the existing footer background and HTML slogan at every viewport. */
.site-header {
  width: 100%;
  background-image: url(images/lfrt.png);
  background-repeat: repeat-x;
  background-position: left top;
}

.headtab2 {
  background-image: none !important;
  background-color: transparent;
}

.header-slogan {
  display: block;
  flex: 1 1 calc(100% - 257px);
  min-width: 0;
  padding: 10px 14px;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-size: clamp(12px, 1.45vw, 20px);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 2px #4b0000;
}

/* Make the existing red button texture cover the entire clickable area. */
a.mainbutton:link,
a.mainbutton:visited,
a.mainbutton:hover,
a.mainbutton:active {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Lower desktop navigation a little more than in v8. */
@media (min-width: 769px) {
  .mainbut {
    position: relative;
    top: 24px;
    flex-basis: 100%;
  }
  .headtab2 {
    align-items: center;
  }
}

@media (max-width: 768px) {
  .headtab2 {
    background-image: none !important;
    background-color: transparent;
  }
  .header-slogan {
    flex: 1 1 100%;
    width: 100%;
    padding: 8px 12px 10px;
    font-size: clamp(11px, 3.2vw, 16px);
    line-height: 1.3;
  }
  .mainbut {
    top: 0;
  }
  a.mainbutton:link,
  a.mainbutton:visited,
  a.mainbutton:hover,
  a.mainbutton:active {
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}


/* v14: restore original desktop header composition; nav sits below slogan on right. */
@media (min-width: 769px) {
  .site-header { background-image:url(images/lfrt.png); background-repeat:repeat-x; background-position:left top; }
  .headcenter { width:min(1200px, 100%); }
  .headtab2 { display:grid; grid-template-columns:257px minmax(0,1fr); grid-template-rows:82px 42px; align-items:center; justify-content:stretch; min-height:124px; height:124px; padding:0; overflow:visible; }
  .headlogo { grid-column:1; grid-row:1 / 3; width:257px; min-width:0; align-self:center; justify-self:center; }
  .header-slogan { grid-column:2; grid-row:1; width:100%; padding:8px 12px 0; font-size:clamp(12px,1.45vw,20px); white-space:nowrap; overflow-wrap:normal; }
  .mainbut { grid-column:2; grid-row:2; position:static; top:auto !important; width:100%; min-width:0; height:42px; padding:0 4px; margin:0; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; background:transparent; }
  a.mainbutton:link, a.mainbutton:visited { flex:1 1 0; width:auto; min-width:0; max-width:170px; min-height:38px; margin:0 1px; padding-left:4px; padding-right:4px; line-height:30px; white-space:nowrap; }
}
@media (max-width:768px) { .headtab2 { height:auto; } .mainbut { background-image:none; } }

/* v15: keep the slogan on the same red textured header on mobile and compact the nav buttons. */
@media (max-width: 768px) {
  .site-header {
    background-color: #761818;
    background-image: url(images/lfrt.png);
    background-repeat: repeat-x;
    background-position: left top;
  }
  .headtab2 {
    background-color: #761818 !important;
    background-image: url(images/lfrt.png) !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 100%;
    padding: 0 5px 5px;
    gap: 0;
  }
  .header-slogan {
    box-sizing: border-box;
    background-color: transparent;
    width: 100%;
    padding: 7px 10px 9px;
    margin: 0;
    line-height: 1.25;
    text-shadow: 1px 1px 2px #4b0000;
  }
  .mainbut {
    box-sizing: border-box;
    height: auto;
    padding: 0;
    margin: 0;
    gap: 4px;
    background: transparent !important;
    align-items: stretch;
  }
  a.mainbutton:link,
  a.mainbutton:visited,
  a.mainbutton:hover,
  a.mainbutton:active {
    box-sizing: border-box;
    min-height: 34px;
    height: 36px;
    line-height: 26px;
    padding: 4px 5px;
    margin: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

/* v16: reduce navigation button height by about one third (approximately 1.5x shorter). */
@media (min-width: 769px) {
  .mainbut {
    height: 30px;
    min-height: 30px;
  }
  a.mainbutton:link,
  a.mainbutton:visited,
  a.mainbutton:hover,
  a.mainbutton:active {
    height: 26px;
    min-height: 26px;
    line-height: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

@media (max-width: 768px) {
  a.mainbutton:link,
  a.mainbutton:visited,
  a.mainbutton:hover,
  a.mainbutton:active {
    height: 24px;
    min-height: 24px;
    line-height: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

/* v17: nudge the category sidebar slightly left on desktop and landscape screens. */
@media (min-width: 769px), (min-width: 600px) and (orientation: landscape) {
  .leftmenutitle,
  a.leftmenu {
    position: relative;
    left: -12px;
  }
}


/* v19: responsive category page layout for narrow screens */
.category-page-layout {
  width: 100% !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.category-page-columns {
  width: 100%;
  table-layout: fixed;
}
.category-page-layout img {
  max-width: 100%;
  height: auto;
}
.subcatlist {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  padding-left: 8px;
  padding-right: 8px;
}
.subcatlist td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.subcatlist img {
  display: block;
  width: 40px;
  max-width: 100%;
  height: auto;
}
.subcatelem {
  padding-left: 8px;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .category-page-layout,
  .category-page-layout > tbody,
  .category-page-layout > tbody > tr,
  .category-page-layout > tbody > tr > td,
  .category-page-columns,
  .category-page-columns > tbody,
  .category-page-columns > tbody > tr,
  .category-page-columns > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  .category-page-layout,
  .category-page-columns {
    table-layout: auto;
  }
  .category-page-layout td.left {
    padding: 0 8px 8px;
    border-right: 0;
    border-bottom: 2px solid #800000;
  }
  .category-page-layout td.mainwindow1 {
    padding: 10px 8px;
    overflow-wrap: anywhere;
  }
  .category-page-layout .subcatlist {
    padding: 6px;
    border-width: 2px;
  }
  .category-page-layout .subcatlist tr.categorylistitem {
    display: table-row;
  }
  .category-page-layout .subcatlist tr.categorylistitem > td:first-child {
    display: table-cell;
    width: 48px !important;
    max-width: 48px !important;
    vertical-align: middle;
  }
  .category-page-layout .subcatlist tr.categorylistitem > td:last-child {
    display: table-cell;
    width: auto !important;
    max-width: none !important;
    vertical-align: middle;
  }
  .category-page-layout .subcatlist a {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}


/* v31: prodlist mobile layout.
   Keep the desktop catalogue unchanged; on narrow screens put filters above
   the products and let product cards wrap within the viewport. */
@media (max-width: 768px) {
  body.prodlist-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.prodlist-page > table[width="1000"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  body.prodlist-page > table[width="1000"] > tbody > tr > td,
  body.prodlist-page td.left2,
  body.prodlist-page td.mainwindow {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  body.prodlist-page td.left2 {
    border-right: 0;
    border-bottom: 2px solid #800000;
    padding: 8px 10px 12px;
  }

  body.prodlist-page td.mainwindow {
    padding: 8px 4px;
    overflow: hidden;
  }

  body.prodlist-page table.pricelist,
  body.prodlist-page table.pricelist > tbody,
  body.prodlist-page table.pricelist > tbody > tr,
  body.prodlist-page table.pricelist > tbody > tr > td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body.prodlist-page table.tt {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: separate;
  }

  body.prodlist-page table.tt > tbody {
    display: block;
    width: 100%;
  }

  body.prodlist-page table.tt > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.prodlist-page td.prod {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  body.prodlist-page table.prodpicframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    table-layout: fixed;
    box-sizing: border-box;
  }

  body.prodlist-page .prodlinkpic {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0;
    text-align: center;
  }

  body.prodlist-page img.pict {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 205px;
    margin: 0 auto;
    object-fit: contain;
  }

  body.prodlist-page .prodnm,
  body.prodlist-page .prodart,
  body.prodlist-page .prodprice,
  body.prodlist-page .oldprodprice,
  body.prodlist-page .newprodprice {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.prodlist-page table.blockfiltr {
    width: 100% !important;
    max-width: 100% !important;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  body.prodlist-page table.blockfiltr input,
  body.prodlist-page table.blockfiltr select {
    max-width: 100%;
    box-sizing: border-box;
  }
}