.note-video-clip {
  width: 100%;
  border: 2px solid #1f2d43;
  padding: 2px;
}

/* the vendor theme hardcodes the brand-logos strip at a desktop-only 1200px
   width with no media query at all, so on any screen narrower than that it
   forces the whole page (header included) into horizontal scroll - cap it
   at the viewport instead, same 1200px ceiling on desktop */
.brands {
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
}

/* the vendor theme hides the last footer catalog link with an intentional
   opencart leftover rule; our footer only lists real categories, so undo it */
.ft_2 li:last-child {
  display: block;
}

/* the vendor theme reserves 20px of left padding on .ft_2 li (originally for
   a background-image bullet that was never shipped) - fill it with a marker */
.ft_2_brands li {
  position: relative;
}
.ft_2_brands li:before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: #cfcfcf;
}
/* .ft_2 li a only gets an explicit color inside the tablet/desktop media
   queries below (720px+); on real mobile widths it falls through to the
   browser default, which turns purple once a link has been visited */
.ft_2_brands li a,
.ft_2_brands li a:visited {
  color: #cfcfcf;
}

@media (max-width: 719px) {
  /* the top bar's Telegram/Instagram/YouTube icons take up a full row above
     the logo/phone on narrow screens; hide them here, they're already
     repeated in the footer */
  #header_top .header_compare_in {
    display: none;
  }

  /* #brand-block ships with no styling anywhere in the vendor theme, so on
     narrow screens the brand logos stack as a tall, ragged bullet list;
     lay them out as a compact scrollable strip instead */
  #brand-block {
    margin: 10px 0;
  }
  #brand-block ul {
    display: flex;
    align-items: center;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 15px;
  }
  #brand-block ul li {
    flex: 0 0 auto;
    height: auto;
    width: auto;
    margin: 0;
  }
  #brand-block ul li a {
    display: block;
    padding: 0;
  }
  #brand-block ul li a img {
    display: block;
    height: 64px;
    width: auto;
    max-width: none;
    object-fit: contain;
  }

  /* footer: .ft_1's text-align:center doesn't reach the "Отдел продаж" phone
     block because .contact_top is a flex row with a single child, so
     justify-content:space-between just pins it to the left edge */
  .ft_1 .footer_1_contact .contact_top {
    justify-content: center;
  }
  .ft_1 .footer_1_contact .contact_top div {
    text-align: center;
  }
  .ft_1 .footer_1_contact .contact_top div h2 {
    text-align: center;
  }

  /* the vendor theme also flat out hides .ft_2 at this breakpoint
     (footer .container_in .ft_2{display:none}); match that selector's
     specificity so our override actually wins instead of losing the cascade */
  footer .container_in .ft_2 {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
  .ft_2 h3 {
    text-align: center;
    color: #fff;
  }
  .ft_2_brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
  }
  .ft_2_brands li {
    padding-left: 16px;
    margin: 0;
  }

  /* the burger overlay is positioned with position:absolute plus hardcoded
     negative margins (-102px/-50px) tuned to a much shorter vendor header;
     this header is taller (logo+tagline+phone+brand strip), so the overlay
     doesn't reach the top of the screen and isn't really "fixed" - make it
     an actual fixed, full-viewport overlay so it always covers the screen */
  .header_desktop > nav .nav_in .mob_menuToggle #burger_content {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 90px 20px 30px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1000;
  }

  /* the vendor theme keeps its desktop 30/67 image+details flex split on
     product cards even at this breakpoint, cramming a thumbnail, title,
     price and spec table into a cramped side-by-side row; stack the card
     top-to-bottom instead (image, then title/price/specs, then a
     full-width "Подробнее" button) using flex order so no template
     markup has to change */
  #featured_products .container_in .product-layout .product_thumb,
  #product-category .container_in .product_layout_grid .product_thumb,
  #product-category .container_in .product_layout_list .product_thumb,
  #product-manufacturer .container_in .product_layout_grid .product_thumb,
  #product-search .container_in .product_layout_grid .product_thumb {
    flex-direction: column;
    padding-bottom: 7px;
  }
  #featured_products .container_in .product-layout .product_thumb .image,
  #product-category .container_in .product_layout_grid .product_thumb .image,
  #product-category .container_in .product_layout_list .product_thumb .image,
  #product-manufacturer .container_in .product_layout_grid .product_thumb .image,
  #product-search .container_in .product_layout_grid .product_thumb .image {
    width: 100%;
    order: -1;
    margin-bottom: 10px;
  }
  #featured_products .container_in .product-layout .product_thumb > h4,
  #product-category .container_in .product_layout_grid .product_thumb > h4,
  #product-category .container_in .product_layout_list .product_thumb > h4,
  #product-manufacturer .container_in .product_layout_grid .product_thumb > h4,
  #product-search .container_in .product_layout_grid .product_thumb > h4,
  #featured_products .container_in .product-layout .product_thumb .product_price,
  #product-category .container_in .product_layout_grid .product_thumb .product_price,
  #product-category .container_in .product_layout_list .product_thumb .product_price,
  #product-manufacturer .container_in .product_layout_grid .product_thumb .product_price,
  #product-search .container_in .product_layout_grid .product_thumb .product_price,
  #featured_products .container_in .product-layout .product_thumb .caption_buttons,
  #product-category .container_in .product_layout_grid .product_thumb .caption_buttons,
  #product-category .container_in .product_layout_list .product_thumb .caption_buttons,
  #product-manufacturer .container_in .product_layout_grid .product_thumb .caption_buttons,
  #product-search .container_in .product_layout_grid .product_thumb .caption_buttons {
    width: 100%;
  }
  #featured_products .container_in .product-layout .product_thumb .caption_buttons .button-group,
  #product-category .container_in .product_layout_grid .product_thumb .caption_buttons .button-group,
  #product-category .container_in .product_layout_list .product_thumb .caption_buttons .button-group,
  #product-manufacturer .container_in .product_layout_grid .product_thumb .caption_buttons .button-group,
  #product-search .container_in .product_layout_grid .product_thumb .caption_buttons .button-group {
    position: static;
    width: 100%;
    padding-right: 0;
    margin-top: 10px;
  }
  #featured_products .container_in .product-layout .product_thumb .caption_buttons .button-group > .in_product_with,
  #product-category .container_in .product_layout_grid .product_thumb .caption_buttons .button-group > .in_product_with,
  #product-category .container_in .product_layout_list .product_thumb .caption_buttons .button-group > .in_product_with,
  #product-manufacturer .container_in .product_layout_grid .product_thumb .caption_buttons .button-group > .in_product_with,
  #product-search .container_in .product_layout_grid .product_thumb .caption_buttons .button-group > .in_product_with {
    width: 100%;
  }
}

@media (min-width: 320px) and (max-width: 1200px){
	.dop_images {
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: space-between;
	  gap: 10px;
	}
	.dop_images .image-additional {
	  padding: 5px;
	  outline: 1px solid #9c9c9c;
	  width: 110px;
	}
	.dop_images img {
	  width: 100%;
	}
}
#product-category .product-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#product-category .product-grid .product-layout {
	width: 100%;
	margin-bottom: 20px;
}
#product-category .product-grid .product_thumb {
	height: 100%;
	padding: 10px;
	display: flex;
	flex-flow: column;
}
#product-category .product-grid .product_thumb > h4 {
	min-height: 44px;
	padding-left: 10px;
	border-left: 2px solid #e81c59;
	margin-bottom: 5px;
}
#product-category .product-grid .product_thumb > h4 a {
	font-size: 16px;
	color: black;
	font-family: "Roboto Condensed", sans-serif;
}
#product-category .product-grid .product_thumb > h4 a:hover {
	color: #e81c59;
}
#product-category .product-grid .product_thumb .product_price {
	margin-bottom: 10px;
	padding: 5px 0 5px 15px;
	background: #303c49;
}
#product-category .product-grid .product_thumb .product_price .price_default {
	color: white;
	font-size: 16px;
	font-family: "Roboto Condensed", sans-serif;
}
#product-category .product-grid .product_thumb .image {
	text-align: center;
	margin-bottom: 10px;
}
#product-category .product-grid .product_thumb .image img {
	width: 100%;
	border-bottom: 6px solid #e81c59;
}
#product-category .product-grid .product_thumb .caption_buttons {
	margin-top: auto;
}
#product-category .product-grid .product_thumb .attribute_description table {
	width: 100%;
	color: black;
	border-collapse: collapse;
	font-family: "Roboto", sans-serif;
	margin-bottom: 10px;
}
#product-category .product-grid .product_thumb .attribute_description table td {
	padding: 4px;
	font-size: 13px;
}
#product-category .product-grid .product_thumb .attribute_description table td:nth-child(2) {
	width: 37%;
	text-align: right;
}
#product-category .product-grid .product_thumb .button-group {
	text-align: center;
}
#product-category .product-grid .product_thumb .button-group .in_product_with {
	display: inline-block;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	font-family: "Roboto Condensed", sans-serif;
	text-align: center;
	line-height: 38px;
	height: 38px;
	padding: 0 20px;
	background: #3d5a86;
}
@media (min-width: 720px) {
	#product-category .product-grid .product-layout {
		width: 48%;
	}
}
@media (min-width: 1200px) {
	#product-category .product-grid .product-layout {
		width: 31%;
	}
}
@media (min-width: 1200px){
	header .header_desktop .header_full .header_in #header_bottom .container_in .header_btm_left{
		width: 53%;
	}
	header .header_desktop .header_full .header_in #header_bottom .container_in .header_btm_right{
		width: 47%;
	}
    footer .container_in .ft_4 ul{
        width:180px;
    }
    header .header_desktop .header_full .header_in #header_top .container_in ul{
        width:180px;
    }
    
    header .header_desktop .header_full .header_in #header_top .container_in ul .header_youtube{
        background: url("/static/img/theme/sprites/social/header.png") 0 -298px;
        background-repeat: no-repeat;
        background-size: 30px;
    }
    
    footer .container_in .ft_1 .footer_1_contact{
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
	
	.dop_images {
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: space-between;
	  gap: 20px;
	}
	.dop_images .image-additional {
	  padding: 5px;
	  outline: 1px solid #9c9c9c;
	  width: 200px;
	}
	.dop_images img {
	  width: 100%;
	}
}
.image-hero-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background: rgba(0, 0, 0, 0.85);
	cursor: zoom-out;
}
.image-hero-modal.open {
	display: flex;
}
.image-hero-modal__img {
	max-width: 90%;
	max-height: 90vh;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	cursor: default;
}
.image-hero-modal__close {
	position: absolute;
	top: 15px;
	right: 25px;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* bootstrap.min.js's collapse plugin is loaded (used below for the sidebar
   catalog), but the vendor theme never shipped bootstrap's CSS, so the
   classes it toggles have no styling anywhere - define them ourselves */
.collapse {
	display: none;
}
.collapse.in {
	display: block;
}
.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease;
}

/* the vendor theme's .list-group-item only has an .active rule (background
   color) - no base display/padding at all, so the sidebar catalog rendered
   as a run of inline links. Build real row/indent styling plus the
   expand/collapse toggle for categories that have subcategories */
#column-left {
	border: 1px solid #e5e5e5;
}
#column-left .category_catalog_title {
	padding: 10px 12px;
	background: #3d5a86;
	color: #fff;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
}
#column-left .sidebar-cat__row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #e5e5e5;
}
#column-left .list-group-item {
	display: block;
	flex: 1 1 auto;
	padding: 10px 12px;
	font-size: 15px;
	font-family: "Roboto", sans-serif;
	color: #333;
}
#column-left .list-group-item:hover {
	background: #f5f5f5;
}
#column-left .list-group-item.active {
	background: #e81c59;
	color: #fff;
	font-weight: bold;
}
#column-left .sidebar-cat__toggle {
	flex: 0 0 40px;
	background: transparent;
	border: 0;
	border-left: 1px solid #e5e5e5;
	cursor: pointer;
}
#column-left .sidebar-cat__chevron {
	display: block;
	margin: 0 auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
#column-left .sidebar-cat__toggle[aria-expanded="true"] .sidebar-cat__chevron {
	transform: rotate(-135deg);
}
#column-left .sidebar-cat__children {
	background: #fafafa;
}
#column-left .list-group-item-sub {
	padding-left: 28px;
	font-size: 14px;
	color: #555;
}