/* ==========================================================================
   Absolut Security (abs101.kz) — shared site styles.
   Section 1: styles moved from the inline <style> of edits/public/index.html
   Section 2: satu.kz (prom) inner pages — fixes and missing styles
   Section 3: WordPress pages — aligned with the same look
   ========================================================================== */

/* ---------- 1. Base layout (from edits/public/index.html) ---------- */
/* Базовый сброс и шрифты */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
    background: #f4f4f9;
    margin: 0;
    padding: 0;
}

/* Ограничитель ширины */
.b-page, .b-header__wrapper, .b-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Шапка */
.b-header { background: #fff; border-bottom: 2px solid #ff0000; padding: 20px 0; }
.b-header__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.b-header-company-name { display: flex; align-items: center; gap: 20px; }
.b-header-company-name__title { font-size: 24px; color: #ff0000; font-weight: bold; }
.b-header__search { flex-grow: 1; margin: 0 40px; }
.b-search__field { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }

/* Меню */
.b-header__nav-part { background: #333; margin-top: 15px; }
.b-menu__holder { list-style: none; display: flex; padding: 0; margin: 0; flex-wrap: wrap; }
.b-menu__link { color: #fff; text-decoration: none; padding: 15px 20px; display: block; font-size: 14px; }
.b-menu__link:hover { background: #ff0000; }

/* Основной макет: Контент + Сайдбар */
.b-page__content-wrapper { display: flex; gap: 30px; margin-top: 30px; align-items: flex-start; }
.b-page__main-content { flex: 3; order: 2; }
.b-sidebar { flex: 1; order: 1; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Сетка товаров */
.b-product-gallery { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px; 
    list-style: none; 
    padding: 0; 
}
.b-product-gallery__item { 
    background: #fff; 
    border: 1px solid #eee; 
    padding: 15px; 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.2s;
}
.b-product-gallery__item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.b-product-gallery__image { max-width: 100%; height: auto; border-bottom: 1px solid #eee; margin-bottom: 10px; }
.b-product-gallery__title { font-size: 14px; color: #333; text-decoration: none; font-weight: bold; height: 40px; overflow: hidden; display: block; }
.b-product-gallery__current-price { color: #ff0000; font-size: 18px; font-weight: bold; margin: 10px 0; display: block; }
.b-product-gallery__btn { 
    background: #ff0000; 
    color: #fff; 
    border: none; 
    padding: 10px; 
    width: 100%; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold;
}

/* Сайдбар: навигация */
.b-nav { list-style: none; padding: 0; }
.b-nav__link { display: block; padding: 10px 0; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.b-nav__link:hover { color: #ff0000; }
.b-caption { display: block; font-weight: bold; margin-bottom: 15px; font-size: 18px; border-left: 4px solid #ff0000; padding-left: 10px; }

/* Подвал */
.b-footer { text-align: center; padding: 40px 0; color: #888; font-size: 12px; }
.b-footer a { color: #888; }

/* Адаптивность */
@media (max-width: 768px) {
    .b-page__content-wrapper { flex-direction: column; }
    .b-page__main-content { order: 1; }
    .b-sidebar { order: 2; width: 100%; box-sizing: border-box; }
    .b-header__search { margin: 20px 0; order: 3; width: 100%; }
}

/* ---------- 2. satu.kz inner pages: fixes and missing styles ----------
   The satu.kz design CSS (member_common / strongred / default) is not part of the static copy,
   so inner pages render unstyled. Three page templates exist:
     2a  "b-*"  (same markup as the home page: products, most groups, articles)
     2b  "cs-*" (newer template: some groups, products and service pages)
     2c  old template (header-top / page-wrapper / sidebar-menu)
   Everything is aligned with the home page look defined in section 1. */

/* 2.0 shared */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { color: #222; line-height: 1.25; }
table { border-collapse: collapse; max-width: 100%; }
/* satu service UI that the home page hides as well */
.b-head-control-panel, .b-info-box, .b-info-banner, .b-hidden, .h-hidden, .js-more-menu,
.b-schedule-btn, .b-header__schedule, .b-online-edit__link, .b-online-edit__horizontal-borders,
.b-online-edit__vertical-borders, .cs-online-edit__link, .cs-online-edit__horizontal-borders, .cs-online-edit__vertical-borders,
.js-oco-inline, .b-form-input-button, .cs-sticky-panel, .cs-product__float, #product-sticky-panel,
.b-product__social-links, .cs-product__social-links, .b-company-social-links { display: none !important; }

/* responsive guards */
html, body.b-layout { min-width: 0 !important; }
body.b-layout { width: auto !important; }
.b-menu { max-width: 100%; min-width: 0; }
.b-menu__holder { max-width: 100%; }
.b-user-content, .cs-page__row > div { overflow-x: auto; }
.b-user-content table, .cs-page__row table { width: auto; max-width: 100%; }
.b-layout .sidebar-menu__dropdown, .b-layout .sidebar-menu__dropdown-wrapper { position: static !important; width: auto !important; left: auto !important; box-shadow: none !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.b-layout .sidebar-menu__dropdown a { padding-left: 15px !important; font-size: 14px; }
.b-layout .b-catalog-panel__icon, .b-layout .b-product-groups-gallery__no-image::before { display: none !important; }

.b-drop-phones, .cs-social-links, .js-one-click-order-member-site, .cs-custom-button-icon_type_callback,
.cs-product-gallery__order-btn .b-form-input-button { display: none !important; }

/* sidebar placed next to (not inside) the content wrapper on inner pages */
.b-page__main-content:has(> .b-sidebar) { display: flex; gap: 30px; align-items: flex-start; }
.b-page__main-content:has(> .b-sidebar) > .b-page__content-wrapper { flex: 3; order: 2; min-width: 0; }
.b-page__main-content:has(> .b-sidebar) > .b-sidebar { flex: 1; order: 1; margin-top: 30px; }
.b-sidebar .b-nav a, .b-sidebar ul a { display: block; padding: 10px 0; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.b-sidebar .b-nav a:hover, .b-sidebar ul a:hover { color: #ff0000; }
.b-sidebar .b-nav ul a { padding-left: 15px; font-size: 14px; }
.b-sidebar ul { list-style: none; padding: 0; margin: 0; }

/* 2a - header & menu like the home page */
.b-header { padding: 20px 0 0; }
.b-header-company-name__logo-wrapper img, .b-header-company-name__logo img { display: block; max-height: 90px; width: auto; }
.b-header-company-name__description, .b-header-company-name__title { margin: 0; font-size: 24px; color: #ff0000; font-weight: bold; }
.b-search { display: flex; gap: 6px; }
.b-search button, .b-search__button { flex: 0 0 auto; padding: 0 14px; border: 0; border-radius: 4px; background: #ff0000; color: #fff; cursor: pointer; }
.b-header__cart, .b-cart-button { color: #333; white-space: nowrap; }
.b-menu__item { flex: 0 0 auto; }
.b-menu__item_state_active .b-menu__link { background: #ff0000; }
.b-menu__arrow { display: none; }
.b-menu__sub-nav, .b-sub-menu { display: none !important; } /* the home page shows only top-level items */

/* 2a - content */
.b-page__content, .b-page__main-content { min-width: 0; }
.b-page__row { margin-bottom: 20px; }
.b-breadcrumb { margin: 0 0 16px; font-size: 13px; color: #888; }
.b-path, .b-breadcrumb__body { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.b-path__item + .b-path__item::before { content: "\203A"; margin-right: 8px; color: #bbb; }
.b-path__link, .b-breadcrumb__link { color: #555; text-decoration: none; }
.b-path__link:hover, .b-breadcrumb__link:hover { color: #ff0000; }
.b-title, .b-title-wrapper h1, .b-product__name { margin: 0 0 15px; font-size: 26px; font-weight: bold; color: #222; }
.b-title_type_product { font-size: 20px; border-left: 4px solid #ff0000; padding-left: 10px; }
.b-user-content, .b-content__body { color: #444; }
.b-user-content p { margin: 0 0 12px; }
.b-product-info, .b-user-content table, .cs-product table, .cs-page__row table {
    width: 100%; margin: 0 0 20px; background: #fff; border: 1px solid #eee; font-size: 14px;
}
.b-product-info td, .b-product-info th, .b-user-content td, .b-user-content th,
.cs-product td, .cs-product th, .cs-page__row td, .cs-page__row th {
    padding: 8px 12px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top;
}
.b-product-info th, .b-product-info__header { background: #f7f7f9; font-weight: bold; }
.b-order-info { list-style: none; padding: 15px 20px; margin: 0 0 20px; background: #fff; border-left: 4px solid #ff0000; border-radius: 4px; }

/* 2a/2b - product card page */
.b-product, .cs-product { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 25px; }
.b-product::after, .cs-product::after { content: ""; display: table; clear: both; }
.b-product__image-panel, .cs-product__img-row { float: left; width: 40%; margin: 0 25px 15px 0; }
.b-product__image-panel img, .cs-product__img-row img { display: block; margin: 0 auto; max-height: 420px; width: auto; }
.b-product__info-holder, .cs-product__info-row { overflow: hidden; }
.b-product-cost, .cs-product__wholesale-price { color: #ff0000; font-size: 24px; font-weight: bold; margin: 10px 0; }
.b-product-data, .b-sundry { list-style: none; padding: 0; margin: 0 0 12px; color: #2e7d32; }
.b-button, .cs-custom-button, .b-product__info-line button {
    display: inline-block; padding: 10px 20px; border: 0; border-radius: 4px; background: #ff0000; color: #fff; font-weight: bold; cursor: pointer;
}
.b-button:hover, .cs-custom-button:hover { background: #d90000; }
.b-product__info-line { margin-bottom: 12px; }
.b-product__info-line_type_sundry { font-size: 13px; color: #666; }
.cs-return-policy { margin-top: 12px; font-size: 13px; color: #666; }
.cs-return-policy__button { display: none; }

/* 2a/2b - product grid */
.b-product-gallery__item, .cs-product-gallery__item { min-width: 0; }
.b-product-gallery__image-link, .cs-product-gallery__image-link { display: block; text-align: center; }
.b-product-gallery__image-link img, .cs-product-gallery__image img, .cs-product-gallery__item img { display: block; margin: 0 auto 10px; max-height: 190px; width: auto; }
.b-product-gallery__item button, .cs-product-gallery__item button { margin-top: auto; }
.b-pager, .cs-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.b-pager a, .b-pager span, .cs-pager a, .cs-pager span { padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #333; text-decoration: none; }
.b-catalog-panel, .cs-catalog-panel { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 15px; }
.b-catalog-panel select, .cs-catalog-panel select { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }

/* 2a - sidebar */
.b-sidebar { min-width: 0; }
.b-sidebar .b-page__row { margin-bottom: 25px; }
.b-nav ul { list-style: none; padding-left: 15px; margin: 0; }
.b-nav ul .b-nav__link { font-size: 14px; }
.b-sidebar__container, .cs-contacts-aside { font-size: 14px; color: #555; }
.b-sidebar__container address, .cs-contacts-aside address { font-style: normal; }
.b-caption:empty { display: none; }

/* 2a - footer */
.b-footer__row { margin: 6px 0; }
#google_translate_element { margin-top: 10px; }

/* 2b - "cs-*" template mapped to the same look */
.cs-header { background: #fff; border-bottom: 2px solid #ff0000; padding: 20px 0 0; }
.cs-header__line-first { display: flex; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 15px 15px; }
.cs-header-company-info { display: flex; align-items: center; gap: 20px; }
.cs-header-company-info__img { display: block; max-height: 90px; width: auto; }
.cs-header-company-info__description { font-size: 24px; color: #ff0000; font-weight: bold; }
.cs-header__line-second { background: #333; }
.cs-header__line-second-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.cs-menu > ul { list-style: none; display: flex; padding: 0; margin: 0; flex-wrap: wrap; }
.cs-menu__item { flex: 0 0 auto; }
.cs-menu__item > a, .cs-menu__link { color: #fff; text-decoration: none; padding: 15px 20px; display: block; font-size: 14px; }
.cs-menu__item > a:hover, .cs-menu__link:hover { background: #ff0000; color: #fff; }
.cs-menu__item ul, .cs-menu__item > div:not(:first-child) { display: none !important; }
.cs-page { display: flex; gap: 30px; align-items: flex-start; max-width: 1200px; margin: 30px auto 0; padding: 0 15px; }
.cs-page__main-content-wrapper { flex: 3; order: 2; min-width: 0; }
.cs-sidebar { flex: 1; order: 1; min-width: 0; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.cs-title, .cs-product__name h1 { margin: 0 0 15px; font-size: 26px; font-weight: bold; color: #222; }
.cs-title_type_sidebar, .cs-title__side-bar { display: block; font-weight: bold; margin-bottom: 15px; font-size: 18px; border-left: 4px solid #ff0000; padding-left: 10px; }
.cs-title_type_sidebar:empty { display: none; }
.cs-nav__list { list-style: none; padding: 0; margin: 0; }
.cs-nav__list ul { list-style: none; padding-left: 15px; margin: 0; }
.cs-nav__list a { display: block; padding: 10px 0; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.cs-nav__list a:hover { color: #ff0000; }
.cs-filter-list a { display: block; padding: 6px 0; color: #333; }
.cs-sidebar input[type="text"], .cs-sidebar input[type="number"] { width: 100%; max-width: 100%; margin: 4px 0; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; }
.cs-sidebar input[type="checkbox"] { accent-color: #ff0000; margin-right: 6px; }
.cs-sidebar ul { list-style: none; padding: 0; margin: 6px 0; }
.cs-sidebar button:not(.cs-search__button):not(.cs-sidebar__info-btn) { padding: 6px 14px; border: 0; border-radius: 4px; background: #ff0000; color: #fff; cursor: pointer; }
.cs-sidebar__row { margin-bottom: 25px; }
/* old-template variants of category tiles and product rows */
.b-product-groups-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0 0 25px; }
.b-product-groups-gallery__item { float: none !important; width: auto !important; margin: 0 !important; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px; text-align: center; }
.b-product-groups-gallery__item img { display: block; max-width: 100%; max-height: 170px; width: auto; height: auto; margin: 0 auto 10px; }
.b-product-groups-gallery__title-wrapper { width: auto !important; }
.b-product-groups-gallery__title-link { color: #333; font-weight: bold; font-size: 14px; text-decoration: none; }
.b-product-groups-gallery__title-link:hover { color: #ff0000; }

/* contacts page */
.cs-contact-info { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 8px; padding: 20px 22px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 25px; color: #444; }
.cs-contact-info__row { display: block; font-style: normal; }
.cs-contact-info__row:empty, .cs-contact-info__row:not(:has(*)):empty { display: none; }
.cs-contact-info > span.cs-contact-info__row:first-of-type { font-size: 18px; font-weight: bold; color: #222; }
.cs-contact-info a.cs-contact-info__row { color: #c00000; }
.cs-contact-info__phone-item:empty, .cs-contact-info .js-ga-phone-hover:not(:has(:not(:empty))) { display: none; }
.cs-contact-info__extra { list-style: none; margin: 0; padding: 0; }
.cs-contact-info__extra-value { display: none; }
.cs-contact-info__btn-wrapper { margin-top: 8px; }
.cs-contact-info__type-mail { display: none; }
.cs-contact-info__schedule, .b-header__schedule button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: default; }
.b-schedule__table { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.b-schedule__table td, .b-schedule__table th { padding: 6px 10px; border-bottom: 1px solid #eee; text-align: left; }
.b-schedule__table tr:first-child { font-weight: bold; background: #f7f7f9; }
.b-schedule__remark { font-size: 13px; color: #888; margin: 8px 0 0; }
.cs-dynamic-map:not(:has(iframe, img)) { display: none; }
.cs-page__row .b-user-content { background: #fff; border-radius: 8px; padding: 15px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* articles list */
.cs-title a, .cs-title__page-second { color: #222; text-decoration: none; }
.cs-title a:hover { color: #ff0000; }
h2.cs-title { font-size: 20px; border-left: 4px solid #ff0000; padding-left: 10px; }
.cs-publications-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 20px; }
.cs-publications-list__item { display: flex; gap: 20px; align-items: flex-start; background: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.cs-publications-list__image { flex: 0 0 180px; display: flex; flex-direction: column; gap: 8px; }
.cs-publications-list__image img { display: block; width: 100%; height: auto; border-radius: 4px; }
.cs-publications-list__date { order: 2; font-size: 13px; color: #888; }
.cs-publications-list__info-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-publications-list__title { color: #222; font-size: 17px; font-weight: bold; text-decoration: none; }
.cs-publications-list__title:hover { color: #ff0000; }
.cs-publications-list__text { color: #555; font-size: 14px; }
.cs-publications-list__read-more { display: none; }
.cs-navigate__show-all { display: inline-block; padding: 10px 20px; border-radius: 4px; background: #ff0000; color: #fff; font-weight: bold; text-decoration: none; }
.cs-navigate__show-all:hover { background: #d90000; color: #fff; }
@media (max-width: 600px) {
    .cs-publications-list__item { flex-direction: column; }
    .cs-publications-list__image { flex-basis: auto; width: 100%; }
}

/* category tiles ("Товары и услуги" page and parent groups) */
.cs-product-groups-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0 0 25px; }
.cs-product-groups-gallery__item { min-width: 0; margin: 0; }
.cs-product-groups-gallery__item-wrapper {
    display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px;
    text-align: center; transition: transform 0.2s, box-shadow 0.2s;
}
.cs-product-groups-gallery__item-wrapper:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.cs-product-groups-gallery .cs-image-holder { display: flex; align-items: center; justify-content: center; height: 170px; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 12px; }
.cs-product-groups-gallery .cs-image-holder__image-link { display: block; height: 100%; }
.cs-product-groups-gallery .cs-image-holder__image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
.cs-product-groups-gallery__info-holder { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; }
.cs-product-groups-gallery__title { color: #333; font-size: 14px; font-weight: bold; text-decoration: none; line-height: 1.35; }
.cs-product-groups-gallery__title:hover { color: #ff0000; }
.cs-product-groups-gallery__counter { display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 10px; background: #ff0000; color: #fff; font-size: 12px; font-weight: bold; }
.cs-sidebar__info-btn { display: none; }
.cs-search { display: flex; gap: 6px; margin-bottom: 20px; }
.cs-search__field { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
.cs-search__button { padding: 0 14px; border: 0; border-radius: 4px; background: #ff0000; color: #fff; }
.cs-product-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0 0 20px; }
.cs-product-gallery__item { background: #fff; border: 1px solid #eee; padding: 15px; border-radius: 8px; display: flex; flex-direction: column; transition: transform 0.2s; }
.cs-product-gallery__item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.cs-product-gallery__item a { color: #333; font-weight: bold; text-decoration: none; }
.cs-image-map__link { color: #555; text-decoration: none; font-size: 14px; }
.cs-documents { font-size: 14px; color: #555; }

/* 2c - old satu template (its own "pink" design CSS is present: override its fonts and float grid) */
body.b-layout, .b-layout :is(div, p, a, li, td, th, h1, h2, h3, h4, b, strong, button, input, select, textarea, address) { font-family: Arial, sans-serif !important; }
.b-layout .container, .b-layout .sidebar, .b-layout .container-left { float: none !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
.b-layout .container-wrapper { width: auto !important; }
body.b-layout { background: #f4f4f9 !important; color: #333; }
/* icon glyphs of the missing "prom" icon font render as stray letters */
.b-layout .top-menu__link::after, .b-layout .header-other-nav__link::before, .b-layout .sidebar-menu__item::before,
.b-layout .sidebar-menu__toggle::before, .b-layout [class*="sidebar-contacts__"]::before, .b-layout [class*="footer-contacts__"]::before,
.b-layout .sidebar-adress__company-name::before, .b-layout .footer-adress__company-name::before { content: none !important; display: none !important; }
.b-layout .sidebar-menu__toggle { display: none !important; }
.b-layout .top-menu__link, .b-layout .header-other-nav__link { text-transform: none !important; padding-left: 0; }
.b-layout .header-other-nav__link { padding: 0 !important; }
.b-layout .top-menu__item { border: 0 !important; }
.b-layout .header-top__logo { background: none !important; box-shadow: none !important; }
.b-layout .header-top { position: static !important; }
.b-layout .b-title, .b-layout .b-title-wrapper { background: none !important; color: #222 !important; text-transform: none !important; box-shadow: none !important; }
.b-layout .b-title::before, .b-layout .b-title::after, .b-layout .b-title-wrapper::before, .b-layout .b-title-wrapper::after { display: none !important; }
.b-layout .sidebar .b-title { color: #222 !important; padding: 0 0 0 10px !important; }
.b-layout .b-breadcrumb { background: transparent !important; }
.b-layout .footer, .b-layout .content-line .footer { background: #fff !important; color: #555 !important; border-top: 2px solid #ff0000; }
.b-layout .footer * { color: inherit; }
.b-layout .b-title__caption { background: none !important; color: #222 !important; text-transform: none !important; font-size: 18px; font-weight: bold; border-left: 4px solid #ff0000; padding: 0 0 0 10px !important; }
.b-layout .b-title__caption::before, .b-layout .b-title__caption::after { display: none !important; }
.b-layout .b-button-colored { display: inline-block; padding: 10px 20px; border: 0; border-radius: 4px; background: #ff0000 !important; color: #fff !important; font-weight: bold; cursor: pointer; }
.b-layout .b-button-colored__text { color: #fff !important; }
.b-layout .search__input { border: 1px solid #ddd !important; border-radius: 4px !important; padding: 8px 10px; }
.cs-title_type_sidebar .cs-title__side-bar { border: 0; padding: 0; margin: 0; }
/* old satu template */
.b-layout .page-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.b-layout .header-top { background: #fff; padding: 20px 0 15px; }
.b-layout .header-top__wrapper { display: flex; align-items: center; gap: 20px; }
.b-layout .header-top__logo img { display: block; max-height: 90px; width: auto; }
.b-layout .top-menu__check-logo { display: none; }
.b-layout .header-top .b-header-company-name__title { font-size: 24px; color: #ff0000; font-weight: bold; }
.b-layout .header { background: #333; border-bottom: 2px solid #ff0000; }
.b-layout .top-menu-wrapper { display: flex; overflow-x: auto; }
.b-layout .top-menu__item { flex: 0 0 auto; }
.b-layout .top-menu__item a { display: block; padding: 15px 20px; color: #fff; text-decoration: none; font-size: 14px; }
.b-layout .top-menu__item a:hover { background: #ff0000; color: #fff; }
.b-layout .top-menu__item ul, .b-layout .top-menu__item .top-menu__item { display: none !important; }
.b-layout .header-other { background: #fff; border-bottom: 1px solid #eee; }
.b-layout .header-other-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 10px 0; }
.b-layout .header-other-nav__link { color: #555; font-size: 13px; text-decoration: none; }
.b-layout .header-other-nav__link:hover { color: #ff0000; }
.b-layout .header-other + .b-breadcrumb { max-width: 1200px; margin: 20px auto 0; padding: 0 15px; }
.b-layout .container-wrapper { display: flex; gap: 30px; align-items: flex-start; margin-top: 20px; }
.b-layout .container { flex: 3; order: 2; min-width: 0; }
.b-layout .sidebar { flex: 1; order: 1; min-width: 0; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.b-layout .sidebar .b-title { display: block; font-weight: bold; margin-bottom: 15px; font-size: 18px; border-left: 4px solid #ff0000; padding-left: 10px; }
.b-layout .sidebar-menu__item a { display: block; padding: 10px 0; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
.b-layout .sidebar-menu__item a:hover { color: #ff0000; }
.b-layout .sidebar-menu__item .sidebar-menu__item a { padding-left: 15px; font-size: 14px; }
.b-layout .sidebar-contacts { margin-top: 20px; font-size: 14px; color: #555; }
.b-layout .footer { padding: 30px 0; color: #888; font-size: 13px; }
.b-layout .footer-table { display: flex; flex-wrap: wrap; gap: 30px; }
.b-layout .footer-cell { flex: 1 1 220px; }
.b-layout .b-shedule-footer__check_next_hide { display: none; }

@media (max-width: 768px) {
    .b-layout .header__table, .b-layout .header__cell { display: block !important; width: auto !important; }
    .b-layout .top-menu, .b-layout .top-menu-wrapper { max-width: 100%; min-width: 0; }
    .b-layout .header .page-wrapper { overflow: hidden; }
    .b-layout .container-wrapper > .container, .b-layout .container-wrapper > .sidebar { width: 100% !important; max-width: 100% !important; align-self: stretch; }
    .b-layout .b-product__image-panel, .b-layout .b-product__image-panel * { max-width: 100% !important; }
    .b-layout .b-product__zoom-box, .b-layout .js-product-gallery-overlay { width: auto !important; height: auto !important; }
    .b-layout .b-product-line, .b-layout .b-product-line > * { display: block !important; width: auto !important; max-width: 100% !important; float: none !important; }
    .b-layout .b-product-line .b-button-colored { max-width: 100%; }
    .b-layout .header-top__inner { min-width: 0; }
    .b-layout .b-header-company-name__title { white-space: normal !important; font-size: 20px !important; }
    .b-layout .header-top__logo img { max-height: 70px; }
    .b-product__image-panel, .cs-product__img-row { float: none; width: 100%; margin: 0 0 15px; }
    .cs-page, .b-layout .container-wrapper { flex-direction: column; }
    .cs-page__main-content-wrapper, .b-layout .container { order: 1; width: 100%; }
    .cs-sidebar, .b-layout .sidebar { order: 2; width: 100%; }
    .cs-header__line-first, .b-layout .header-top__wrapper { flex-wrap: wrap; }
    .b-title, .cs-title, .cs-product__name h1 { font-size: 22px; }
    .b-sidebar .is-collapsed { display: none; }
    .b-sidebar .b-caption[role="button"] { cursor: pointer; }
    .b-sidebar .b-caption[role="button"]::after { content: " \25BE"; color: #ff0000; }
    .b-sidebar .b-caption.is-open::after { content: " \25B4"; }
    .b-page__main-content:has(> .b-sidebar) { flex-direction: column; }
    .b-page__main-content:has(> .b-sidebar) > .b-page__content-wrapper { order: 1; width: 100%; }
    .b-page__main-content:has(> .b-sidebar) > .b-sidebar { order: 2; width: 100%; margin-top: 0; }
}

/* ---------- 3. WordPress pages (SaleJunction theme) aligned with the home page look ----------
   Header: logo + contacts on white with the red bottom line, dark menu bar below it,
   content card + sidebar card on the light grey page, light footer. Scoped to non-satu pages. */
body:not(.b-layout) { font-family: Arial, sans-serif !important; color: #333; background: #f4f4f9 !important; }
body:not(.b-layout) :is(h1, h2, h3, h4, h5, h6, p, a, li, td, th, input, button, textarea, label, span) { font-family: Arial, sans-serif !important; }
body:not(.b-layout) .wrapper_main { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.b-layout) .wrapper_header { order: 1; background: #fff; border-bottom: 0 !important; }
body:not(.b-layout) .wrapper_top, body:not(.b-layout) .top_cartinfo { background: #333 !important; }
body:not(.b-layout) .wrapper_top { order: 2; background: #333 !important; border-bottom: 2px solid #ff0000; height: auto !important; }
body:not(.b-layout) .content_wrapper { order: 3; flex: 1; }
body:not(.b-layout) .footer_wrapper { order: 4; }
body:not(.b-layout) .footer_bottom { order: 5; }
body:not(.b-layout) .container_24 { width: auto !important; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; padding: 0 15px; float: none !important; }
body:not(.b-layout) .grid_24 { width: auto !important; float: none !important; margin: 0 !important; }
body:not(.b-layout) .content_wrapper * { max-width: 100%; }
body:not(.b-layout) .content_wrapper div:not([class]) { width: auto !important; }
/* header */
body:not(.b-layout) .wrapper_header .header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 20px 0; height: auto !important; }
body:not(.b-layout) .wrapper_header .header > * { float: none !important; margin: 0 !important; }
body:not(.b-layout) .wrapper_header .logo img, body:not(.b-layout) .wrapper_header .header img { max-height: 90px; width: auto; }
body:not(.b-layout) .topkont { color: #555; font-size: 14px; }
body:not(.b-layout) .wrapper_header input[type="text"], body:not(.b-layout) .wrapper_header input[type="search"] { padding: 10px; border: 1px solid #ddd !important; border-radius: 4px; }
/* menu bar */
body:not(.b-layout) .wrapper_top .container_24 { float: none !important; }
body:not(.b-layout) .wrapper_top, body:not(.b-layout) .top_cartinfo, body:not(.b-layout) .wrapper_top .grid_24 { position: static !important; height: auto !important; overflow: visible; }
body:not(.b-layout) .wrapper_top::after { content: ""; display: table; clear: both; }
body:not(.b-layout) #MainNav ul.sf-menu > li > a { margin: 0 !important; top: 0 !important; }
body:not(.b-layout) #MainNav, body:not(.b-layout) #MainNav #menu { height: auto !important; }
body:not(.b-layout) #MainNav ul.sf-menu { float: none !important; display: flex; flex-wrap: wrap; width: auto !important; height: auto !important; margin: 0; padding: 0; background: none !important; }
body:not(.b-layout) #MainNav ul.sf-menu > li { display: block !important; float: none !important; height: auto !important; background: none !important; }
body:not(.b-layout) #MainNav ul.sf-menu > li > a { display: block !important; height: auto !important; padding: 15px 20px !important; color: #fff !important; font-size: 14px !important; font-weight: normal !important; line-height: 1.4 !important; background: none !important; text-shadow: none !important; }
body:not(.b-layout) #MainNav ul.sf-menu > li > a:hover, body:not(.b-layout) #MainNav ul.sf-menu > li.current-menu-item > a,
body:not(.b-layout) #MainNav ul.sf-menu > li.current-menu-parent > a, body:not(.b-layout) #MainNav ul.sf-menu > li.current_page_item > a { background: #ff0000 !important; color: #fff !important; }
body:not(.b-layout) #MainNav ul.sf-menu ul { background: #333 !important; border: 0 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
body:not(.b-layout) #MainNav ul.sf-menu ul a { color: #fff !important; background: none !important; padding: 10px 15px !important; }
body:not(.b-layout) #MainNav ul.sf-menu ul a:hover { background: #ff0000 !important; }
/* content + sidebar */
body:not(.b-layout) .page-content { padding: 30px 0 !important; }
body:not(.b-layout) .content_wrapper .grid_24 { display: flex; gap: 30px; align-items: flex-start; }
body:not(.b-layout) .content_wrapper .grid_16, body:not(.b-layout) .content_wrapper .fullwidth { flex: 3; order: 2; min-width: 0; width: auto !important; float: none !important; margin: 0 !important; }
body:not(.b-layout) .content_wrapper .grid_8 { flex: 1; order: 1; min-width: 0; width: auto !important; float: none !important; margin: 0 !important; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
body:not(.b-layout) .content-bar, body:not(.b-layout) .fullwidth_inner {
    background: #fff !important; border: 0 !important; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 20px !important;
}
body:not(.b-layout) .content-bar * { border-color: #eee !important; }
body:not(.b-layout) .content-bar .post_content, body:not(.b-layout) .content-bar .content-box { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* WooCommerce single/archive: sidebar is a sibling of .grid_24 */
body:not(.b-layout) .page-content > .container_24:has(> .grid_8) { display: flex; gap: 30px; align-items: flex-start; }
body:not(.b-layout) .page-content > .container_24:has(> .grid_8) > .grid_24 { flex: 3; order: 2; min-width: 0; }
body:not(.b-layout) .page-content > .container_24 > .grid_8 { flex: 1; order: 1; min-width: 0; width: auto !important; float: none !important; margin: 0 !important; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
body:not(.b-layout) .grid_8 h3, body:not(.b-layout) .grid_8 h4, body:not(.b-layout) .grid_8 h3 a {
    display: block; font-weight: bold !important; font-size: 18px !important; color: #333 !important; border-bottom: 0 !important; text-decoration: none;
}
body:not(.b-layout) .grid_8 h3, body:not(.b-layout) .grid_8 h4 { border-left: 4px solid #ff0000; padding: 0 0 0 10px !important; margin: 0 0 15px !important; }
body:not(.b-layout) .grid_8 h3::after, body:not(.b-layout) .grid_8 h4::after { display: none !important; }
body:not(.b-layout) h1, body:not(.b-layout) .entry-title, body:not(.b-layout) .page-title, body:not(.b-layout) .product_title { color: #222 !important; font-weight: bold; font-size: 26px; }
body:not(.b-layout) .widget h3, body:not(.b-layout) .widgettitle, body:not(.b-layout) .sidebar h2, body:not(.b-layout) .widget-title {
    display: block; font-weight: bold; font-size: 18px; color: #333 !important; border-bottom: 0 !important; border-left: 4px solid #ff0000; padding: 0 0 0 10px; margin: 0 0 15px;
}
body:not(.b-layout) .grid_8 ul { list-style: none; padding: 0; margin: 0; }
body:not(.b-layout) .grid_8 li a, body:not(.b-layout) .product-categories a { display: block; padding: 10px 0; color: #333; text-decoration: none; border-bottom: 1px solid #eee; }
body:not(.b-layout) .grid_8 li a:hover, body:not(.b-layout) .product-categories a:hover, body:not(.b-layout) .current-cat > a { color: #ff0000 !important; }
body:not(.b-layout) a { color: #c00000; }
body:not(.b-layout) a:hover { color: #ff0000; }
/* woocommerce lists */
body:not(.b-layout) ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 0 0 20px !important; padding: 0 !important; }
body:not(.b-layout) ul.products::before, body:not(.b-layout) ul.products::after { display: none !important; }
body:not(.b-layout) ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; background: #fff; border: 1px solid #eee; padding: 15px !important; border-radius: 8px; transition: transform 0.2s; }
body:not(.b-layout) ul.products li.product:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
body:not(.b-layout) ul.products li.product .price, body:not(.b-layout) p.price { color: #ff0000 !important; font-weight: bold; font-size: 18px; }
body:not(.b-layout) .button, body:not(.b-layout) button[type="submit"], body:not(.b-layout) input[type="submit"], body:not(.b-layout) .wpcf7-submit {
    background: #ff0000 !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; padding: 10px 20px !important; font-weight: bold; cursor: pointer;
}
body:not(.b-layout) .wpcf7 input:not([type="submit"]), body:not(.b-layout) .wpcf7 textarea { width: 100%; padding: 10px; border: 1px solid #ddd !important; border-radius: 4px; }
body:not(.b-layout) .woocommerce-info { border-top-color: #ff0000 !important; }
body:not(.b-layout) .woocommerce-info::before { color: #ff0000 !important; }
/* footer like the home page */
body:not(.b-layout) .footer_wrapper, body:not(.b-layout) .footer_bottom { background: transparent !important; border: 0 !important; color: #888; text-align: center; font-size: 12px; }
body:not(.b-layout) .footer_bottom { padding: 40px 0; }
body:not(.b-layout) .footer_wrapper:empty, body:not(.b-layout) .footer_wrapper .container_24:empty { display: none; }
body:not(.b-layout) .footer_bottom a { color: #888; }
body:not(.b-layout) .footer_bottom .grid_12 { width: auto !important; float: none !important; }

@media (max-width: 768px) {
    body:not(.b-layout) .content_wrapper .grid_24 { flex-direction: column; }
    body:not(.b-layout) .content_wrapper .grid_16, body:not(.b-layout) .content_wrapper .fullwidth { order: 1; width: 100% !important; }
    body:not(.b-layout) .content_wrapper .grid_8 { order: 2; width: 100% !important; }
    body:not(.b-layout) .page-content > .container_24:has(> .grid_8) { flex-direction: column; }
    body:not(.b-layout) .page-content > .container_24:has(> .grid_8) > * { width: 100% !important; }
    body:not(.b-layout) #MainNav ul.sf-menu { flex-wrap: nowrap; overflow-x: auto; }
    body:not(.b-layout) #MainNav ul.sf-menu > li > a { white-space: nowrap; }
    body:not(.b-layout) .wrapper_header .header { justify-content: center; }
}