/* >>> 10-layout >>> */
/* Step 10 - one layout: frame 990 px = 286 (left column) + 20 + 684 (content). Markup: tools/vita-dsk.ru/steps/README.md */

/* the header «обратный звонок» button (was styled by an inline rule on the home page only) */
#telephone-head a.YOUR_BUTTON { height: 15px; }
#footer-phones a { text-decoration: none; color: #FF4769; padding-right: 30px; float: left; line-height: 1.5; }
#footer-phones a:hover { text-decoration: none; color: #FF4769; }

/* catalogue menu: the Bootstrap dropdown look of the former menu, without Bootstrap */
#catmenu { position: relative; z-index: 1000; width: 286px; margin: 0 0 5px; padding: 5px 0; box-sizing: border-box;
  background: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175); font-size: 14px; line-height: 1.42857143; text-align: left; }
#catmenu ul { list-style: none; margin: 0; padding: 0; }
#catmenu li { position: relative; margin: 0; padding: 0; list-style: none; }
#catmenu a { display: block; padding: 3px 20px; font-size: 14px; font-weight: 400; line-height: 1.42857143;
  color: #333; text-decoration: none; white-space: normal; }
#catmenu a:hover, #catmenu a:focus, #catmenu li:hover > a { color: #262626; text-decoration: none; background-color: #f5f5f5; }
#catmenu li.cm-path > a { font-weight: 700; color: #003333; background: #ededed url(/images/cm_bg.gif); }
#catmenu li.cm-cur > a { font-weight: 700; color: #003333; background: #e2e2e2 url(/images/cm_bg.gif); }
#catmenu li.cm-has-sub > a:after { content: " "; float: right; width: 0; height: 0; margin-top: 5px; margin-right: -10px;
  border: solid transparent; border-width: 5px 0 5px 5px; border-left-color: #999; }
/* flyouts: scaled to zero width until the item is hovered or focused (keyboard) */
#catmenu .cm-sub { position: absolute; top: -6px; left: 100%; z-index: 1001; width: max-content; min-width: 170px; max-width: 300px; margin: 0 0 0 -1px; padding: 5px 0;
  background: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 0 6px 6px 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175); transform: scale(0, 1); transform-origin: 0 0; }
#catmenu li:hover > .cm-sub, #catmenu li:focus-within > .cm-sub { transform: none; }

/* phones use viewport width=1000: the frame (990) + the two green edges (23 px each) would scroll sideways by 36 px,
   so on narrow screens the edges shrink to 1-2 px */
@media (max-width: 1040px) {
  td.page_edge_bg > img, td.page_edge_bg_left_right_line > img { width: 1px; }
  td.page_edge_bg[width="4"] { width: 1px; }
}

/* breadcrumb line placeholder (filled by step 30) */
.crumbs { font-size: 80%; }
.crumbs:not(:empty) { padding: 0 0 10px; }

/* home page: slider, gap under it, the tile grid and the blocks under it fill the 684 px column */
.home-tiles-wrap { margin: 0 -20px; }
#hero { margin-bottom: 22px; }
#content .mar2 { margin-left: 0; margin-right: 0; }

/* «НОВИНКА» / «АКЦИЯ» labels next to card texts: the small bold look they had where Bootstrap was loaded */
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1;
  white-space: nowrap; vertical-align: baseline; }

/* one look for product names: product page (h1) and listing cards (h2) */
.product-name { margin: 1em 0 10px; font-size: 90%; font-weight: bold; }
/* <<< 10-layout <<< */

/* >>> 20-images >>> */
/* Step 20 - text instead of pictures. The pictures were drawn (tools/vita-dsk.ru/ui.py) with these fonts, so the text uses the same
   ones: Tahoma Bold 14 (top menu), Arial Bold 18 squeezed to 72 % (headings), Verdana 12 (buttons), Arial Black / Bold / Regular (logo),
   Trebuchet MS Bold (banners). Every box keeps the size of the picture it replaces. */

/* top menu (was mm_*.gif, white Tahoma Bold 14 on the green bar; the active page is yellow) */
#topmenu a.mm-btn { display: inline-block; overflow: hidden; box-sizing: border-box; height: 40px; text-align: center;
  font: bold 14px/44px Tahoma, Verdana, Geneva, Arial, sans-serif; color: #fff; text-decoration: none; white-space: nowrap; }
#topmenu a.mm-how_to_order { width: 140px; }
#topmenu a.mm-delivery_conditions { width: 162px; }
#topmenu a.mm-company { width: 115px; }
#topmenu a.mm-contacts { width: 112px; }
#topmenu a.mm-btn:hover, #topmenu a.mm-btn:focus, #topmenu a.mm-cur { color: #ffe36b; }

/* page headings (was p_header_*.gif: orange Arial Bold 18 capitals squeezed to 72 %; the gap under them was two <br>) */
h2.p-header { margin: 0 0 23px; padding: 0 0 0 2px; height: 20px; font: bold 18px/25px Arial, "Liberation Sans", Helvetica, sans-serif;
  text-transform: uppercase; color: #ff8400; white-space: nowrap; transform: scaleX(.72); transform-origin: 0 0; }
/* home page blocks «Популярные товары» / «Новости» (was block_header_*.gif: Arial Narrow Bold 14 squeezed to 90 %; 88 % here, Chrome draws it a little wider) */
h2.block-header { margin: 0 0 4px; padding: 0 0 0 3px; height: 14px; font: bold 14px/14px "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", "Roboto Condensed", Arial, sans-serif;
  font-stretch: condensed; text-transform: uppercase; color: #ff8400; white-space: nowrap; transform: scaleX(.88); transform-origin: 0 0; }

/* logo (was logo.gif 252x62: the mark stays a picture, the lettering is text) */
.logo-box { display: inline-block; position: relative; overflow: hidden; width: 252px; height: 62px; }
.logo-box a.logo-link { position: absolute; left: 0; top: 0; width: 252px; height: 62px; text-decoration: none; }
.logo-box span { position: absolute; white-space: nowrap; text-decoration: none; }
.logo-mark { position: absolute; left: 0; top: 0; }
.logo-name { left: 68px; top: 11px; font: normal 30px/30px "Arial Black", Arial, Helvetica, sans-serif; letter-spacing: -.4px; color: #018b2e; }
.logo-kind { left: 170px; top: 21px; font: bold 12px/13px Arial, Helvetica, sans-serif; color: #ff8400; }
.logo-tag { pointer-events: none; left: 69px; top: 43px; font: normal 12px/12px Arial, Helvetica, sans-serif; color: #003333; }

/* orange gradient buttons (was the search, buy, order, sign-in and register pictures: white Verdana on an orange gradient) */
html body .btn-o { display: inline-block; box-sizing: border-box; height: 22px; margin: 0; padding: 0; border: 0; border-top: 1px solid #ffc478;
  border-radius: 0; background: linear-gradient(#fd9013, #de6e00); color: #fff; font: normal 12px/21px Verdana, Tahoma, Geneva, sans-serif;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; vertical-align: middle; }
html body .btn-o:hover { background: linear-gradient(#ff9d2b, #ee7c0a); }
html body .btn-search { width: 48px; margin-left: 5px; }
html body .btn-buy { width: 67px; margin: 15px; }
html body .btn-order { width: 66px; margin: 15px; }
html body .btn-form { border: 1px solid #f1c494; background: linear-gradient(#dd7200, #ff8400 50%, #dd7200); font-size: 11px; line-height: 19px; }
html body .btn-auth { width: 48px; }
html body .btn-reg { width: 130px; }

/* pink «КУПИТЬ» button of the new cards (the button itself is .opp3qwe in common.css: Arial Bold 13 capitals; only its lettering was a picture) */
.product-buy a.opp3qwe#add_button { display: block; overflow: hidden; text-align: center; text-indent: 28px; font: bold 13px/24px Arial, Helvetica, sans-serif;
  text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }

/* «Скачать прайс-лист» (was download_price.gif 129x20: the heading style squeezed to fit the 129 px picture, 62 %) */
.dl-price { display: inline-block; width: 129px; height: 20px; margin-left: 5px; vertical-align: middle; white-space: nowrap; }
.dl-price > span { display: inline-block; padding-left: 2px; font: bold 18px/23px Arial, "Liberation Sans", Helvetica, sans-serif; text-transform: uppercase; color: #ff8400;
  transform: scaleX(.618); transform-origin: 0 0; }
a:hover > .dl-price > span { text-decoration: underline; }

/* left banner (was mat_gimnast.png 230x120: pattern picture + Trebuchet MS Bold lettering with a 1 px shadow and a dashed frame) */
span.mat-banner { display: inline-block; position: relative; overflow: hidden; width: 230px; height: 120px; background: url(/files/mat_gimnast_bg.png) no-repeat;
  color: #f5e98a; font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,60,10,.78); }
span.mat-banner a.mb-link { position: absolute; left: 0; top: 0; width: 230px; height: 120px; color: #f5e98a; text-decoration: none;
  font: bold 16px/1.2 "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; }
span.mat-banner span { position: absolute; left: 0; width: 230px; text-align: center; white-space: nowrap; }
.mb-1 { top: 14px; font-size: 24px; line-height: 28px; text-transform: uppercase; }
.mb-2 { top: 45px; font-size: 17px; line-height: 20px; text-transform: uppercase; }
.mb-3 { pointer-events: none; top: 74px; left: 45px !important; box-sizing: border-box; width: 141px !important; height: 37px; border: 1px dashed rgba(230,220,120,.86); font-size: 22px; line-height: 35px; }

/* home slider (was three pictures with headline and price, cross-slide plugin): lettering-free pictures + text, a few lines of script fade them */
#test1.hero-slides { position: relative; width: 684px; height: 224px; overflow: hidden; }
.hs { position: absolute; left: 0; top: 0; width: 684px; height: 224px; background: #0a9a2a no-repeat 0 0; text-align: left; }
.hs-1 { background-image: url(/images/hero_1.jpg); z-index: 3; }
.hs-2 { background-image: url(/images/hero_2.jpg); z-index: 2; }
.hs-3 { background-image: url(/images/hero_3.jpg); z-index: 1; }
.hs p { position: absolute; margin: 0; padding: 0; white-space: nowrap; font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif; font-weight: bold; }
.hs-1 p { color: #fbf7a0; text-shadow: 1.5px 0 #0a6a28, -1.5px 0 #0a6a28, 0 1.5px #0a6a28, 0 -1.5px #0a6a28, 1px 1px #0a6a28, -1px -1px #0a6a28, 1px -1px #0a6a28, -1px 1px #0a6a28, 0 2px 3px rgba(0,50,10,.5); }
.hs-2 p { color: #eeeb92; text-shadow: 1.5px 0 #1f4a05, -1.5px 0 #1f4a05, 0 1.5px #1f4a05, 0 -1.5px #1f4a05, 1px 1px #1f4a05, -1px -1px #1f4a05, 1px -1px #1f4a05, -1px 1px #1f4a05; }
.hs-3 p { color: #f5e98a; text-shadow: 2px 2px 0 #003c0a; }
.hs-tag { left: 283px; top: 12px; font-size: 20px; line-height: 24px; }
.hs-1 .hs-t1 { left: 35px; top: 74px; font-size: 29.6px; line-height: 36px; text-transform: uppercase; }
.hs-1 .hs-t1 span { display: block; }
.hs-1 .hs-t1 span + span { margin-left: 1px; font-size: 31px; letter-spacing: .2px; }
.hs-2 .hs-t1 { left: 231px; top: 44px; font-size: 34px; line-height: 40px; text-transform: uppercase; }
.hs-2 .hs-t2 { left: 290px; top: 103px; font-size: 21px; line-height: 24px; text-transform: uppercase; }
.hs-2 .hs-price { left: 410px; top: 118px; box-sizing: border-box; width: 234px; height: 72px; padding: 0 0 0 0; text-align: center; font-size: 31px; line-height: 68px;
  border: 2px dashed rgba(238,233,140,.6); background: rgba(0,0,0,.09); }
.hs-3 .hs-t1 { left: 0; top: 38px; width: 684px; text-align: center; font-size: 34px; line-height: 40px; letter-spacing: -.15px; text-transform: uppercase; }
.hs-3 .hs-t2 { left: 0; top: 86px; width: 684px; text-align: center; font-size: 20px; line-height: 24px; }
.hs-3 .hs-price { left: 242px; top: 128px; box-sizing: border-box; width: 201px; height: 65px; text-align: center; font-size: 32px; line-height: 63px;
  border: 1px dashed rgba(230,220,120,.86); background: #005a14; }
/* <<< 20-images <<< */

/* >>> 30-breadcrumbs >>> */
/* breadcrumb line (step 30): Главная → Каталог → группа → раздел → страница; the arrow is drawn here, the crumbs are
   an <ol> inside div.crumbs (font size and the bottom gap come from the 10-layout rules above) */
.crumbs nav { display: block; }
.crumbs ol { margin: 0; padding: 0; list-style: none; line-height: 1.45; }
.crumbs li { display: inline; margin: 0; padding: 0; }
.crumbs li + li::before { content: "\2192"; display: inline-block; padding: 0 .4em 0 .1em; text-decoration: none; }
.crumbs li[aria-current="page"] { color: #003333; }
.crumbs a { text-decoration: underline; }
/* <<< 30-breadcrumbs <<< */

/* >>> 40-shop >>> */
/* step 40 - shop signals and the cosmetic cart (js/cart.js; markup: tools/vita-dsk.ru/steps/40_shop.py) */

/* header cell td#header-order: cart icon, «Корзина» with the counter, the phone line under it */
#header-order .cart-box { display: flex; align-items: center; justify-content: center; height: 65px; }
#header-order .cart-ico { flex: none; margin-right: 8px; line-height: 0; }
#header-order .cart-lines { text-align: left; line-height: 1.75; }
#header-order a.cart-link { font-size: 14px; font-weight: bold; text-decoration: none; }
.cart-lab { text-decoration: underline; }
a.cart-link:hover .cart-lab { text-decoration: none; }
#header-order .cart-tel { display: block; }
.cart-count { display: inline-block; box-sizing: border-box; min-width: 19px; height: 19px; margin-left: 3px; padding: 0 5px; border-radius: 10px;
  background: #767676; color: #fff; font: bold 12px/19px Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; vertical-align: 1px; }
.cart-count.has-items { background: #d9153c; }

/* card: availability under the price, «В корзину» button and the small «Как заказать» link under it */
.product-avail { padding: 0 0 .25em; font-weight: bold; }
.product-specs + .product-avail { padding-top: .6em; }
.avail-in { color: #067a26; }
.avail-order { color: #b85c00; }
html body .btn-o.cart-add { width: 90px; }
html body .btn-o.cart-add.is-added, .product-buy a.opp3qwe.is-added { background: #2f9e44; border-color: #2f9e44; }
.product-buy a.opp3qwe.is-added:hover { background: #2f9e44; }
.product-buy a.buy-how { display: block; clear: both; margin: 0 0 9px 15px; font-size: 11px; line-height: 14px; }
.product-buy a.btn-o + a.buy-how { margin-top: -8px; }

/* cart page /content/cart/ */
.cart-app { margin: 12px 0 0; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { padding: 6px 8px; border-bottom: 1px solid #ccc; background: #ededed url(/images/mab_bg.gif); font-weight: bold; text-align: left; }
.cart-table td { padding: 9px 8px; border-bottom: 1px solid #ddd; vertical-align: middle; }
.cart-table .cart-price, .cart-table .cart-sum { text-align: right; white-space: nowrap; }
.cart-table .cart-qty { width: 84px; text-align: center; white-space: nowrap; }
.cart-table .cart-del { width: 30px; text-align: center; }
.cart-name a { font-weight: bold; }
.cart-meta { display: block; margin-top: 2px; font-size: 11px; color: #555; }
.cart-qty-num { display: inline-block; min-width: 26px; text-align: center; font-weight: bold; }
.cart-step { width: 22px; height: 22px; padding: 0; border: 0; border-top: 1px solid #ffc478; background: linear-gradient(#fd9013, #de6e00); color: #fff;
  font: bold 14px/20px Arial, Helvetica, sans-serif; cursor: pointer; vertical-align: middle; }
.cart-step:hover { background: linear-gradient(#ff9d2b, #ee7c0a); }
.cart-step:disabled { border-top-color: #ddd; background: #ccc; cursor: default; }
.cart-total { margin: 14px 0 4px; font-size: 16px; font-weight: bold; text-align: right; }
.cart-total span { color: #fc2d4e; font-size: 19px; }
.cart-total small { font-size: 11px; font-weight: normal; }
.cart-note { margin: 0 0 4px; font-size: 12px; color: #444; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 6px; }
.cart-btn { display: inline-block; box-sizing: border-box; height: 30px; padding: 0 16px; color: #fff; font: bold 13px/30px Arial, Helvetica, sans-serif;
  text-decoration: none; white-space: nowrap; }
.cart-btn-call { background: #fc2d4e; }
.cart-btn-call:hover { background: #ff7a93; }
.cart-btn-mail { border-top: 1px solid #ffc478; background: linear-gradient(#fd9013, #de6e00); line-height: 29px; }
.cart-btn-mail:hover { background: linear-gradient(#ff9d2b, #ee7c0a); }
.cart-clear { padding: 0; border: 0; background: none; color: #003333; font: 12px Arial, Helvetica, sans-serif; text-decoration: underline; cursor: pointer; }
.cart-clear:hover { text-decoration: none; }
.cart-empty { margin: 0 0 10px; }
.cart-app ~ h2.header2 { margin-top: 24px; }
/* <<< 40-shop <<< */