/*
  SG Storeline brand overrides -- v2.
  Per the brandbook (VISUAL IDENTITY SYSTEM / BRAND / SD GROUP), the two
  colors marked as "standard colors" are High Gray #888888 and Pure
  Black #000000 -- these are the site's actual primary/interactive colors.
  The six Pantone swatches are explicitly marked as "auxiliary colors"
  with a note that they are for secondary print/POP material, NOT
  the standard execution color. The reference homepage mockups confirm
  this: buttons, menus, hovers and CTAs are black/white/gray only.
  v1 of this file made a Pantone teal (#006D62) the primary site accent,
  which is what the brandbook explicitly says not to do. v2 makes black
  the primary accent and keeps the Pantone hues for small semantic
  badges only (sale/success/info), matching how the brandbook scopes them.
*/

:root,
[data-bs-theme=light] {
  --sg-black: #000000;
  --sg-high-gray: #888888;
  --sg-high-gray-rgb: 136, 136, 136;
  --sg-silver: #9E9EA0;
  --sg-white: #ffffff;

  /* Primary interactive accent = brand's own black/gray pair, not a Pantone hue */
  --sg-primary: #000000;
  --sg-primary-rgb: 0, 0, 0;
  --sg-primary-dark: #2B2B2B;
  --sg-primary-dark-rgb: 43, 43, 43;
  --sg-primary-light: var(--sg-high-gray);
  --sg-primary-light-rgb: var(--sg-high-gray-rgb);

  /* Auxiliary Pantone colors — semantic badges/tags only, never the primary accent */
  --sg-success: #75BD51;
  --sg-success-rgb: 117, 189, 81;
  --sg-info: #55B5DB;
  --sg-info-rgb: 85, 181, 219;
  --sg-danger: #EA5859;
  --sg-danger-rgb: 234, 88, 89;

  --sg-bg-muted: #F5F7F8;
  --sg-font-family: "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  --black: var(--sg-black);
  --black-rgb: 0, 0, 0;
  --blue: var(--sg-info);
  --blue-rgb: var(--sg-info-rgb);
  --green: var(--sg-success);
  --green-rgb: var(--sg-success-rgb);
  --green-dark: var(--sg-primary);
  --green-dark-rgb: var(--sg-primary-rgb);
  --grey: var(--sg-high-gray);
  --grey-rgb: var(--sg-high-gray-rgb);
  --red: var(--sg-danger);
  --red-rgb: var(--sg-danger-rgb);
  --primary: var(--sg-primary);
  --primary-rgb: var(--sg-primary-rgb);
  --text: #575D60;
  --text-rgb: 87, 93, 96;

  --font-sans-serif: var(--sg-font-family);
  --body-font-family: var(--sg-font-family);
  --body-color: #575D60;
  --heading-color: var(--sg-black);
  --emphasis-color: var(--sg-black);
  --emphasis-color-rgb: 0, 0, 0;
  --link-color: var(--sg-black);
  --link-color-rgb: 0, 0, 0;
  --link-hover-color: var(--sg-primary-light);
  --link-hover-color-rgb: var(--sg-primary-light-rgb);
  --focus-ring-color: rgba(var(--sg-primary-rgb), 0.25);
  --form-valid-color: var(--sg-success);
  --form-invalid-color: var(--sg-danger);
  --form-invalid-border-color: var(--sg-danger);

  --bs-font-sans-serif: var(--sg-font-family);
  --bs-body-font-family: var(--sg-font-family);
  --bs-body-color: #575D60;
  --bs-heading-color: var(--sg-black);
  --bs-emphasis-color: var(--sg-black);
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-primary: var(--sg-primary);
  --bs-primary-rgb: var(--sg-primary-rgb);
  --bs-success: var(--sg-success);
  --bs-success-rgb: var(--sg-success-rgb);
  --bs-info: var(--sg-info);
  --bs-info-rgb: var(--sg-info-rgb);
  --bs-danger: var(--sg-danger);
  --bs-danger-rgb: var(--sg-danger-rgb);
  --bs-link-color: var(--sg-black);
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: var(--sg-primary-light);
  --bs-link-hover-color-rgb: var(--sg-primary-light-rgb);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.16);

  --swiper-theme-color: var(--sg-primary);
  --swiper-pagination-color: var(--sg-primary);
  --swiper-scrollbar-drag-bg-color: var(--sg-primary);
  --slider-nav-btn-hover-bg: var(--sg-primary);
}

body,
.page,
input,
button,
select,
textarea,
.tooltip,
.popover,
.dropdown-menu,
.modal,
.offcanvas,
.popup {
  font-family: var(--sg-font-family) !important;
}

a,
.link {
  color: var(--sg-black);
}

/* Plain text links fade to gray on hover. Button-styled anchors (.btn/.button)
   are intentionally excluded here — their hover color/background is already
   defined by the component itself (e.g. .btn-outline-white), and this rule
   used to carry !important, which hijacked that hover color on any <a class="btn">
   even though a sibling <button> with the same visual style was unaffected. */
a:not(.btn):not(.button):hover,
a:not(.btn):not(.button):focus,
.link:hover,
.link:focus,
.nav-link:hover,
.nav-link:focus,
.navbar-nav .nav-link.active,
.dropdown-item:hover,
.dropdown-item:focus,
.breadcrumbs a:hover span,
.more_text_ajax {
  color: var(--sg-primary-light) !important;
}

::selection {
  color: #fff;
  background: var(--sg-primary);
}

.text-primary,
.link-primary,
.phones .order_wrap_btn,
.top-h-row .h-user-block a:hover,
.footer_bottom .all_menu_block ul li a:hover,
.footer_bottom .submenu_top .menu_item a:hover {
  color: var(--sg-primary) !important;
}

.text-success {
  color: var(--sg-success) !important;
}

.text-info {
  color: var(--sg-info) !important;
}

.text-danger,
.text-red,
.error,
.errortext,
.sale,
.discount,
.discount_badge_block,
.catalog-top-banner-stick,
.catalog-top-banner-disc {
  color: var(--sg-danger) !important;
}

.text-grey,
.text-muted {
  color: var(--sg-high-gray) !important;
}

.bg-primary,
.badge.bg-primary,
.rss_feed_icon,
blockquote::before,
ul li::before,
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.swiper-pagination-bullet-active,
.swiper-scrollbar-drag,
.wr_scrollbar .scrollbar .handle,
.module-pagination .nums .cur,
.number_list a.current span,
.filter_opener.opened,
.captcha_reload::before,
.more_text_ajax::before,
.icon_error_block::after,
.top-h-row-special,
#footer .footer_inner .line {
  background-color: var(--sg-primary) !important;
  border-color: var(--sg-primary) !important;
}

ul li::before {
  color: var(--sg-primary) !important;
  background-color: transparent !important;
}

.bg-success,
.badge.bg-success {
  background-color: var(--sg-success) !important;
}

.bg-info,
.badge.bg-info {
  background-color: var(--sg-info) !important;
}

.bg-danger,
.badge.bg-danger,
.catalog_item .sale_block,
.catalog_item .stickers .sticker.sale,
.catalog_item .stickers .sticker.aktsiya,
.sticker.sale,
.sticker.aktsiya {
  background-color: var(--sg-danger) !important;
  border-color: var(--sg-danger) !important;
  color: #fff !important;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sg-primary);
  --bs-btn-border-color: var(--sg-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sg-primary-dark);
  --bs-btn-hover-border-color: var(--sg-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--sg-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sg-primary-dark);
  --bs-btn-active-border-color: var(--sg-primary-dark);
  --bs-btn-disabled-bg: var(--sg-high-gray);
  --bs-btn-disabled-border-color: var(--sg-high-gray);
}

.btn-outline-primary {
  --bs-btn-color: var(--sg-primary);
  --bs-btn-border-color: var(--sg-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sg-primary);
  --bs-btn-hover-border-color: var(--sg-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sg-primary-dark);
  --bs-btn-active-border-color: var(--sg-primary-dark);
}

button.button,
input.button,
.button:not(.transparent):not(.white_bg),
.basket_button,
.basket_button span,
.button30,
.button30 span,
.compare_button span,
#order_form_div input[type="submit"],
.bx_filter .button,
.bx_filter .bx_filter_popup_result,
.product-item-detail-buy-button,
.catalog_item .basket_button,
.basket_wrapp .wraps_icon_block.basket .count span,
.header-cart-block .cart span.icon .count,
#header .basket_fly .opener .basket_count:not(.empty) .count {
  color: #fff !important;
  background: var(--sg-primary) !important;
  border-color: var(--sg-primary) !important;
}

/* Счётчик корзины в новой шапке — бейдж .count.badge.bg-red: правило выше не должно
   красить его вложенные span (давало чёрный прямоугольник в красном кружке). 2026-10-08 */
.basket_wrapp .wraps_icon_block.basket .count.badge span {
  color: inherit !important;
  background: transparent !important;
  border-color: transparent !important;
}

button.button:hover,
input.button:hover,
.button:not(.transparent):not(.white_bg):hover,
.basket_button:hover,
.basket_button:hover span,
.button30:hover,
.button30:hover span,
.compare_button:hover span,
#order_form_div input[type="submit"]:hover,
.bx_filter .button:hover,
.product-item-detail-buy-button:hover,
.catalog_item .basket_button:hover {
  color: #fff !important;
  background: var(--sg-primary-dark) !important;
  border-color: var(--sg-primary-dark) !important;
}

.button.transparent,
.btn-link {
  color: var(--sg-primary) !important;
}

.button.transparent:hover,
.button.transparent:not(.text):hover,
.button.transparent.grey_br:hover {
  color: #fff !important;
  background: var(--sg-primary) !important;
  border-color: var(--sg-primary) !important;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
.bx_filter_vertical input[type="checkbox"]:checked + label.sku,
.bx_filter .bx_filter_param_label.active .bx_filter_param_btn,
.sku_props .bx_item_detail_size ul li.active,
.sku_props .bx_item_detail_size ul li:hover,
.bx_catalog_item_scu .bx_item_detail_scu ul li.active span.cnt {
  border-color: var(--sg-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--sg-primary-rgb), .18) !important;
}

.form-check-input:checked,
.bx_filter .bx_ui_slider_pricebar_V,
.smartfilter .bx_ui_slider_track .bx_ui_slider_range,
.smartfilter .bx_ui_slider_track .bx_ui_slider_handle {
  background-color: var(--sg-primary) !important;
  border-color: var(--sg-primary) !important;
}

/* Buttons are excluded here too (see the a:hover note above) so a header
   button's own hover styling can't be hijacked to a text-only color change. */
.header a:not(.btn):hover,
.basket_wrapp a:not(.btn):hover,
.basket_wrapp button:not(.btn):hover,
.catalog_detail .like_icons > div.text.added,
.like_icons span.wish_item.added,
.like_icons span.compare_item.added,
a.compare_item.added,
a.wish_item.added {
  color: var(--sg-primary) !important;
}

.top-h-row-special {
  background: var(--sg-black) !important;
  color: #fff !important;
}

.top-h-row-special a,
.top-h-row-special .link {
  color: #fff !important;
}

.top-h-row-special a:hover,
.top-h-row-special .link:hover {
  color: var(--sg-primary-light) !important;
}

#header .catalog_menu,
#header .catalog_menu ul.menu > li,
.has_menu.m_color_colored #header .catalog_menu,
.has_menu.m_color_colored #header .catalog_menu ul.menu > li,
.wrapper.m_color_colored #header .catalog_menu ul.menu > li.current,
.m_color_none #header .center_block .main-nav,
.m_color_colored #header .center_block .main-nav,
.has_menu #header .center_block .main-nav {
  background: var(--sg-primary) !important;
  border-color: var(--sg-primary-dark) !important;
}

#header .catalog_menu ul.menu > li:not(.current):hover,
#header .catalog_menu ul.menu > li.hover,
#header ul.menu.full.opened li:not(.search_row):hover,
#header ul.menu.full.opened li.current,
.wrapper.m_color_colored #header .catalog_menu ul.menu > li:not(.current):hover,
.wrapper.m_color_colored #header .catalog_menu ul.menu > li:not(.current).hover {
  background: var(--sg-primary-dark) !important;
  border-color: var(--sg-primary-dark) !important;
}

#header .catalog_menu ul.menu li a,
#header .catalog_menu ul.menu > li.current > a {
  color: #fff !important;
}

ul.menu li .child .child_wrapp,
.breadcrumbs .dropdown,
.authorization-cols .form-block,
.catalog_detail ul.tabs.main_tabs,
.popup .form .form_head {
  border-color: var(--sg-primary) !important;
}

ul.menu li b.space,
.breadcrumbs .drop b.space,
.hint .triangle,
.item_slider .thumbs i.triangle {
  border-bottom-color: var(--sg-primary) !important;
}

ul.tabs li.cur .triangle,
.view-list .view-header i.triangle {
  border-top-color: var(--sg-primary-dark) !important;
}

.bx_filter_container #modef .triangle,
.left_block .internal_sections_list .child_wrapp .triangle {
  border-right-color: var(--sg-primary) !important;
}

.left_menu > li.current,
.left_menu > li:not(.exit):hover,
.left_block .internal_sections_list li.cur,
.left_block .internal_sections_list li:hover,
.left_block .internal_sections_list li.item:hover > a,
.left_block .internal_sections_list li.item.cur > a {
  color: #fff !important;
  background: var(--sg-primary) !important;
}

.tabs-head li.current,
.item_slider .thumbs li.current,
.basket_sort ul.tabs li.cur div,
.module-gallery-list li .fancy_hover:hover,
#order_form_div .sale_order_table .ps_logo img:hover,
#order_form_div .sale_order_table .ps_logo input[type=radio]:checked + label img,
#order_form_div .sale_order_table.delivery label:hover img,
#order_form_div .sale_order_table.delivery input[type=radio]:checked + label img,
#order_form_div div.ps_logo.selected img,
#order_form_div .account label:hover img,
#order_form_div .account img.active {
  border-color: var(--sg-primary) !important;
}

.alert-success {
  color: var(--sg-success);
  background-color: rgba(var(--sg-success-rgb), .14);
  border-color: rgba(var(--sg-success-rgb), .35);
}

.alert-info {
  color: var(--sg-primary-dark);
  background-color: rgba(var(--sg-info-rgb), .15);
  border-color: rgba(var(--sg-info-rgb), .32);
}

.alert-danger {
  color: var(--sg-danger);
  background-color: rgba(var(--sg-danger-rgb), .12);
  border-color: rgba(var(--sg-danger-rgb), .35);
}

@media (max-width: 768px) {
  body .flex-control-paging li a.flex-active,
  body .flex-control-paging li:hover a:not(.touch) {
    background: var(--sg-primary) !important;
  }
}

/*
  Dark homepage sections (.home-section--dark, background #292C2E — used by
  #homeGallerySection for the gallery/blog/reviews/stores blocks, and again
  on the catalog section-list page) keep their own light text color
  (#D5D8DC) by design. The site's base heading rule paints h1-h6 in
  #1d2023 — almost the same near-black as this section's background — so
  any heading without its own explicit light-color override (like
  "Магазины Vetro") becomes effectively invisible there. These rules are
  scoped strictly to .home-section--dark so light-background headings
  elsewhere keep the brand's Pure Black.
*/
.home-section--dark h1,
.home-section--dark h2,
.home-section--dark h3,
.home-section--dark h4,
.home-section--dark h5,
.home-section--dark h6,
.home-section--dark .h1,
.home-section--dark .h2,
.home-section--dark .h3,
.home-section--dark .h4,
.home-section--dark .h5,
.home-section--dark .h6 {
  color: #D5D8DC;
}

.home-section--dark a:not(.btn):not(.button):not(.nav-link) {
  color: #fff;
}

.home-section--dark a:not(.btn):not(.button):not(.nav-link):hover,
.home-section--dark a:not(.btn):not(.button):not(.nav-link):focus {
  color: var(--sg-primary-light) !important;
}

a.logo img {
  max-width: 120px;
}

a.navbar-brand {
  max-width: 80px;
}