/* ============================================================
   zem-mobile.css — Mobile layout (≤991px)
   Homepage + header + fullscreen menu overlay.
   Load AFTER all other stylesheets.
   ============================================================ */

/* ── Desktop: overlay chrome hidden, nav bar works as before ── */
@media (min-width: 992px) {
  .zem-burger--header { display: none !important; }
  .zem-mmenu__head,
  .zem-mmenu__contacts,
  .zem-mmenu__foot { display: none !important; }
  .zem-mmenu {
    position: relative;
    visibility: visible;
    opacity: 1;
    inset: auto;
    z-index: auto;
    background: transparent;
    overflow: visible;
  }
  .zem-mmenu__inner {
    display: block;
    padding: 0;
    min-height: 0;
  }
  .zem-mmenu__nav { display: block; }
  .top-menu {
    height: auto;
    overflow: visible;
  }
  .top-menu .zem-mmenu .oc-menu.horizontal-menu { display: block !important; }

  body[class*="product-product"] .breadcrumbs .container{
    padding-right: 0px;
    padding-left: 0px;
  }

}

/* ══════════════════════════════════════════════════════════════
   MOBILE HEADER  (≤991px)
   Logo left · search + burger right
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* .wrapper had overflow-x:clip (ocslideshow) — breaks position:sticky on header */
  .wrapper {
    overflow: visible !important;
  }

  header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--zem-header, #242424);
  }

  .header-inner {
    border-bottom: 0.5px solid #5a5a5a;
  }

  .header-inner .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-inner .container-inner.zem-header-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 22px 0;
  }

  /* logo — left aligned (override stylesheet.css mobile center) */
  .zem-header-bar > .logo-container {
    position: static !important;
    transform: none !important;
    flex: 0 1 auto !important;
    max-width: 55% !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .zem-header-bar > .logo-container #logo {
    text-align: left !important;
    padding: 0;
    display: flex;
    align-items: center;
  }

  #logo img {
    max-height: 36px;
    width: auto;
    display: block;
  }

  /* hide desktop-only header items */
  .zem-header-bar > .zem-social,
  .zem-header-right .zem-lang-wrap,
  .zem-header-right .zem-contact .zem-region,
  .zem-header-right .zem-contact .header-num-mob,
  .zem-header-right .zem-contact .zem-phone-num {
    display: none !important;
  }

  /* phone icon + contact dropdown (same as desktop) */
  .zem-header-right .zem-contact {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
  }

  .zem-header-right .zem-contact .zem-phone-ic {
    width: 36px;
    height: 36px;
    border-radius: 40px;
  }

  .zem-header-right .zem-contact-menu {
    right: 0;
    left: auto;
  }

  /* right actions: phone + search + burger */
  .zem-header-bar > .box-cart.zem-header-right,
  .box-cart.zem-header-right {
    margin-bottom: 0 !important;
    position: static;
    transform: none;
  }

  .zem-header-bar > .zem-header-right {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 10px;
    align-items: center;
  }

  /* show search on mobile (override stylesheet.css hide) */
  .zem-header-right .zem-search-wrap,
  .zem-header-right #search {
    display: block !important;
    float: none;
  }

  .zem-header-right #search .search-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid #616161;
    background: #2f2f2f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .zem-header-right #search .search-content {
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    margin: 0;
    min-width: 260px;
    background: #2a2a2a;
    border: 1px solid #3f3f3f;
    border-radius: 4px;
    padding: 8px;
  }

  #search .input-group-btn {
    position: absolute;
    right: 15px;
    width: auto;
    top: 9px;
  }

  /* burger in header */
  .zem-burger--header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid #616161;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .zem-burger--header .zem-burger-ic {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 1px;
    background: #FFFFFF;
    transition: background 0.15s;
  }

  .zem-burger--header .zem-burger-ic::before,
  .zem-burger--header .zem-burger-ic::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1px;
    background: #FFFFFF;
    transition: transform 0.2s, top 0.2s;
  }

  .zem-burger--header .zem-burger-ic::before { top: -6px; }
  .zem-burger--header .zem-burger-ic::after  { top: 6px; }

  /* keep hamburger icon when menu open — close only via overlay X */
  body.zem-mmenu-active .zem-burger--header {
    visibility: hidden;
    pointer-events: none;
  }

  /* hide header logo when menu open — overlay has its own logo */
  body.zem-mmenu-active .zem-header-bar > .logo-container {
    display: none !important;
  }

  /* sticky header icons overlap the close button — don't intercept taps */
  body.zem-mmenu-active .header-inner {
    pointer-events: none;
  }

  /* hide desktop nav bar strip */
  .top-menu {
    border: 0;
    padding: 0;
    background: transparent !important;
    height: 0;
    overflow: visible;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FULLSCREEN MENU OVERLAY  (≤991px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  body.zem-mmenu-active {
    overflow: hidden;
  }

  .zem-mmenu {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: #1c1c1c;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zem-mmenu.zem-mmenu--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .zem-mmenu__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 16px 32px;
    box-sizing: border-box;
  }

  /* header row: logo + close */
  .zem-mmenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #1c1c1c;
  }

  .zem-mmenu__logo img {
    max-height: 28px;
    width: auto;
    display: block;
  }

  .zem-mmenu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #616161;
    border-radius: 4px;
    background: transparent;
    color: #f8d04a;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    z-index: 11;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    /*margin-right: 12px;*/
  }

  .zem-mmenu__close:hover {
    color: #fff;
    background: #2f2f2f;
    border-color: #616161;
  }

  /* contacts block */
  .zem-mmenu__contacts {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .zem-mmenu__region {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: #b18952;
    margin: 0 0 12px;
  }

  .zem-mmenu__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .zem-mmenu__phone:hover {
    color: #fff;
    opacity: 0.85;
  }

  .zem-mmenu__phone + .zem-mmenu__phone {
    margin-top: 12px;
  }

  .zem-mmenu__phone-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #b18952;
    color: #fff;
    flex: 0 0 auto;
  }

  .zem-mmenu__phone-ic .zem-ic {
    width: 12px;
    height: 12px;
  }

  /* navigation links */
  .zem-mmenu__nav {
    /*flex: 1 1 auto;*/
    padding: 8px 0;
  }

  .zem-mmenu__nav .oc-menu.horizontal-menu {
    display: block !important;
  }

  .zem-mmenu__nav .oc-menu.horizontal-menu > .container {
    width: 100%;
    padding: 0;
  }

  .zem-mmenu__nav .oc-menu.oc-menu-bar .ul-top-items {
    display: block !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .zem-mmenu__nav .oc-menu.oc-menu-bar .ul-top-items .li-top-item {
    float: none !important;
    display: block !important;
    position: relative;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.06);*/
    background: transparent !important;
  }

  .zem-mmenu__nav .oc-menu.oc-menu-bar .ul-top-items .li-top-item .a-top-link {
    display: block !important;
    padding: 12px 0 !important;
    line-height: 1.4 !important;
    color: #fff !important;
    text-align: left !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: none !important;
  }

  .zem-mmenu__nav .oc-menu.oc-menu-bar .ul-top-items .li-top-item .a-top-link span {
    line-height: 1.4 !important;
    color: #fff !important;
  }

  .zem-mmenu__nav .ul-top-items .li-top-item .a-top-link .fa-angle-down {
    float: right;
    margin-top: 2px;
    transition: transform 0.2s;
    color: #9a9a9a;
  }

  .zem-mmenu__nav .li-top-item.expand > .a-top-link .fa-angle-down {
    transform: rotate(180deg);
  }

  /* sub-menus accordion */
  .zem-mmenu__nav .sub-menu-container {
    display: none !important;
  }

  .zem-mmenu__nav .li-top-item.expand > .sub-menu-container {
    display: block !important;
    position: static !important;
    width: auto !important;
    left: 0;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 0 12px;
  }

  .zem-mmenu__nav .sub-menu-container .row {
    display: block;
    margin: 0;
  }

  .zem-mmenu__nav .sub-menu-container [class*="col-md-"] {
    width: 100% !important;
    float: none !important;
    padding: 4px 0 4px 16px;
  }

  .zem-mmenu__nav .a-mega-second-link,
  .zem-mmenu__nav .a-mega-third-link,
  .zem-mmenu__nav .a-second-link,
  .zem-mmenu__nav .a-third-link {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 14px !important;
    padding: 8px 0 !important;
    display: block;
  }

  /* footer: language + social */
  .zem-mmenu__foot {
    flex: 0 0 auto;
    /*margin-top: auto;*/
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .zem-mmenu__lang {
    margin-bottom: 24px;
    overflow: visible;
  }

  .zem-mmenu__lang .zem-lang-wrap {
    display: block !important;
  }

  .zem-mmenu__lang #form-language,
  .zem-mmenu__lang .btn-group {
    display: block;
  }

  .zem-mmenu__lang #form-language .dropdown-toggle,
  .zem-mmenu__lang .zem-lang-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
  }

  .zem-mmenu__lang .zem-lang-code {
    color: #fff;
    font-size: 16px !important;
  }

  .zem-mmenu__lang .zem-ic-chev {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    color: #fff;
    flex: 0 0 auto;
  }

  .zem-mmenu__lang .dropdown-menu {
    position: static;
    /*float: none;*/
    display: none;
    /*margin-top: 8px;*/
    box-shadow: none;
  }

  .zem-mmenu__lang .btn-group.open .dropdown-menu {
    display: block;
    position: relative;
    z-index: 1001;
  }

  /* Bootstrap inserts a full-screen .dropdown-backdrop on touch devices to catch
     outside taps. With the static-positioned menu it covered the language links,
     so tapping a language did nothing. Disable it inside the mobile menu. */
  .zem-mmenu__lang .dropdown-backdrop {
    display: none !important;
  }

  .zem-mmenu__social {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
    align-items: center;
    margin-top: auto;
  }

  /* clone desktop header social icons */
  .zem-mmenu__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2f2f2f;
    color: #616161;
    transition: color 0.2s, background 0.2s;
  }

  .zem-mmenu__social a:hover {
    color: #f8d04a;
    background: #363636;
  }

  .zem-mmenu__social a svg {
    display: block;
    width: auto;
    height: auto;
    fill: currentColor;
  }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — MOBILE SECTIONS  (≤991px, scoped to .home1)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .home1 .container {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    max-width: 100%;
  }

  /* section titles */
  .home1 .section-header,
  .home1 .zem-section-title,
  .home1 .zem-cat-banners.zem-cat-dyn .zem-section-title a,
  .home1 .zem-services.zem-services-dop .zem-section-title a{
    font-size: 22px !important;
    letter-spacing: 0.44px;
    margin-bottom: 24px;
    padding: 0 4px;
  }

  /* ── Hero slider — centered text + dots per Figma ── */
  .home1 .nivoSlider,
  .home1 .banner7,
  .home1 .oc-banner7-container {
    min-height: 420px;
  }

  .home1 .flexslider.oc-nivoslider {
    min-height: auto !important;
  }

  .home1 .banner7-content .text-content {
    left: 50% !important;
    right: auto !important;
    max-width: calc(100% - 40px) !important;
    width: 100%;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .home1 .banner7-content .title1,
  .home1 .banner7-content .sub-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
    text-align: center;
  }

  .home1 .banner7-content .banner7-des {
    text-align: center;
  }

  .home1 .banner7-content .banner7-des p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    text-align: center;
  }

  .home1 .banner7-content .banner7-des p span {
    font-size: 22px !important;
    display: block;
  }

  .home1 .banner7-content .banner7-readmore {
    text-align: center;
  }

  .home1 .banner7-readmore a {
    font-size: 12px !important;
    padding: 12px 24px !important;
    height: auto;
    min-height: 44px;
    letter-spacing: 0.6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid #b18952 !important;
    color: #b18952 !important;
  }

  .home1 .banner7-readmore a:hover {
    background: #b18952 !important;
    color: #242424 !important;
  }

  .home1 .nivo-controlNav {
    display: none !important;
  }

  /* ── Category grid — layout in zem-cat-banners.css ── */
  body.home1 .zem-cat-banners.zem-cat-dyn {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .home1 .zem-cat-banners.zem-cat-dyn .section-header,
  .home1 .zem-cat-banners.zem-cat-dyn .zem-section-title {
    text-align: center;
    margin-bottom: 24px;
  }

  .home1 .zem-cat-dyn .row {
    margin-left: -8px;
    margin-right: -8px;
  }
  body.common-home.home1 .zem-cat-dyn .row {
    margin-left: 0px;
    margin-right: 0px;
  }

  .home1 .zem-cat-dyn .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* ── Services — stacked cards with gaps ── */
  .home1 .zem-services {
    padding: 32px 16px;
  }

  .home1 .zem-services .container {
    padding-left: 0;
    padding-right: 0;
  }

  .home1 .zem-services .row {
    margin-left: 0;
    margin-right: 0;
  }

  .home1 .zem-services .row > [class*="col-"] {
    width: 100% !important;
    float: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 12px;
  }

  .home1 .zem-service-tile {
    height: 200px;
    min-height: 200px;
    margin-bottom: 0;
    border-radius: 4px;
  }

  .home1 .zem-service-tile img {
    /*height: 200px;*/
    min-height: 200px;
  }

  .home1 .zem-service-tile .zem-service-cap {
    padding: 16px;
    min-height: auto !important;
    background: linear-gradient(0deg, rgba(15, 15, 15, 0.88), rgba(15, 15, 15, 0));
  }

  .home1 .zem-service-tile .zem-service-cap h4 {
    font-size: 16px !important;
  }

  .home1 .zem-services-more {
    margin-top: 20px !important;
    text-align: center;
    padding: 0 !important;
  }

  .home1 .zem-services-more a,
  .home1 .zem-services-more .btn {
    /*display: inline-block !important;*/
    width: 100% !important;
    /*max-width: calc(100% - 32px);*/
    margin: 0 auto;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Benefits — 2×2 grid ── */
  .home1 .zem-benefits {
    padding: 32px 0;
  }

  .home1 .zem-benefits .zem-benefit-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 12px;
    margin-bottom: 24px;
  }

  .home1 .zem-benefits .zem-benefit-item h4 {
    font-size: 14px !important;
  }

  .home1 .zem-benefits .zem-benefit-item p {
    font-size: 11px !important;
    max-width: 100%;
  }

  /* ── CTA banner ── */
  .home1 .zem-cta-photo {
    padding: 40px 0;
    margin: 0;
  }

  .home1 .zem-cta-photo h2,
  .home1 .zem-cta-photo h3,
  .home1 .zem-cta-photo .zem-cta-inner h2 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }

  .home1 .zem-cta-photo p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  .home1 .zem-cta-photo .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Popular products — vertical full-width cards ── */
  .home1 .zem-popular {
    padding: 32px 16px;
  }

  .home1 .zem-popular .row > [class*="col-"] {
    width: 100% !important;
    float: none;
    padding: 0;
  }

  .home1 .zem-product-tile {
    padding: 0;
    margin-bottom: 24px;
    background: var(--zem-card, #1d1d1d);
    border-radius: 4px;
    overflow: hidden;
  }

  .home1 .zem-product-tile .zem-product-img {
    height: 180px;
    border-radius: 4px 4px 0 0;
  }

  .home1 .zem-product-tile .zem-product-name {
    display: block;
    width: 100%;
    padding: 12px 16px 0;
    box-sizing: border-box;
    min-height: 0;
    font-size: 14px !important;
  }

  .home1 .zem-product-tile .zem-product-price {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 16px 0;
    box-sizing: border-box;
    font-size: 14px !important;
  }

  .home1 .zem-product-tile .zem-product-cta {
    margin: 12px 16px 16px;
    width: calc(100% - 32px);
    box-sizing: border-box;
  }

  /* ── Brands strip ── */
  .home1 .zem-brands {
    padding: 24px 0;
  }

  .home1 .zem-brands .zem-brand-tile {
    width: 140px;
    height: 72px;
    padding: 10px;
  }

  /* ── Blog / articles — vertical list, no carousel ── */
  .home1 #blog_home .owl-container {
    padding: 0;
  }

  .home1 .articles-container {
    display: block !important;
    width: 100% !important;
  }

  .home1 .articles-container .row_items {
    display: block !important;
    width: 100% !important;
  }

  .home1 .articles-container .articles-inner {
    width: 100% !important;
    margin-bottom: 24px;
  }

  .home1 .articles-container .owl-stage-outer,
  .home1 .articles-container .owl-stage,
  .home1 .articles-container .owl-item {
    display: block !important;
    width: 100% !important;
    transform: none !important;
  }

  .home1 .articles-container .articles-name {
    font-size: 16px !important;
  }

  .home1 .articles-container .articles-intro p {
    font-size: 13px !important;
  }

  /* ── SEO text ── */
  .home1 .seo-collapse,
  .home1 .container.seo-collapse {
    padding: 32px 16px !important;
    box-sizing: border-box;
  }

  .home1 .seo-collapse .section-header {
    font-size: 20px !important;
    text-align: left !important;
    padding: 0;
  }

  .home1 .seo-collapse p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ── FAQ ── */
  .home1 .faq-block {
    padding: 32px 0;
  }

  .home1 .faq-block .panel-title a {
    font-size: 15px !important;
    padding: 14px 0;
  }

  .home1 .faq-block .panel-body,
  .home1 .faq-block .panel-body p {
    font-size: 13px !important;
  }

  /* ── Reviews ── */
  .home1 .reviews-block .review-card {
    padding: 20px 16px;
    margin-bottom: 16px;
  }

  .home1 .reviews-block .review-text {
    font-size: 14px !important;
  }

  /* ── Ask block (CTA #2) ── */
  .home1 .ask-block {
    padding: 40px 0;
  }

  .home1 .ask-block .section-header {
    font-size: 22px !important;
  }

  .home1 .ask-block p {
    font-size: 14px !important;
  }

  /* ── Footer ── */
  .home1 footer,
  footer {
    margin-top: 0;
  }

  footer .footer-top {
    padding: 40px 0 24px;
  }

  footer .footer-top .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  footer .zem-footer-row {
    gap: 18px;
  }

  footer .footer-title h3:not(.zem-logo-foot) {
    font-size: 15px;
    margin-bottom: 12px;
  }

  footer .list-unstyled.text-content li a {
    font-size: 13px !important;
    padding: 3px 0;
  }

  footer .zem-foot-about {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.7;
  }

  footer .zem-foot-contacts a {
    font-size: 14px !important;
  }

  footer .zem-foot-msgs a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2f2f2f;
    color: #9a9a9a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  footer .footer-bottom {
    padding-bottom: 24px;
  }

  footer .zem-foot-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* footer accordion (FAQ-style) */
  footer .zem-foot-acc .footer-title {
    cursor: pointer;
    margin-bottom: 0;
  }

  footer .zem-foot-acc .footer-title h3:not(.zem-logo-foot) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 15px;
  }

  footer .zem-foot-acc .footer-title h3:not(.zem-logo-foot)::after {
    content: '\f078';
    font-family: 'FontAwesome';
    font-weight: normal;
    font-size: 12px;
    color: #fff;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2f2f2f;
    border: 1px solid #616161;
    border-radius: 4px;
    transition: transform 0.2s, background 0.2s;
  }

  footer .zem-foot-acc.is-open .footer-title h3:not(.zem-logo-foot)::after {
    content: '\f077';
    background: rgba(255, 255, 255, 0.15);
    border-color: transparent;
  }

  footer .zem-foot-acc .footer-content {
    display: none;
    padding: 8px 0 16px;
  }

  footer .zem-foot-acc.is-open .footer-content {
    display: block;
  }

  /* hide back-to-top on mobile (optional clutter) */
  #back-top {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 991px) {
  .container.seo-collapse {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  .home1 .oc-banner7-container {
    min-height: 300px;
  }
  .home1 .banner7 {
    min-height: auto;
  }
  .zem-contact .zem-phone-ic{
    background: unset;
    color: #F8D04A;
    border: 1px solid #616161;
    background: #2f2f2f;
    border-radius: 30px;
  }
  #information-information #content p, #information-information #content li, .zem-cat-desc p {
    font-size: 14px !important;
  }
  #product-category h3.zem-sidebar__title.zem-cat-nav__toggle{
    display: flex;
  }
  #product-category aside#column-left{
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .zem-cat-desc img{
    height: auto !important;
  }
  #product-category aside#column-left .category-module {
    margin-bottom: 0px;
  }
  #product-category aside#column-left .brand-slider {
    padding: 0;
  }
  .breadcrumbs{
    margin-bottom: 5px;
  }
  .toolbar.toolbar-products.zem-toolbar{
    display: none !important;
  }
  .breadcrumbs .container {
    display: flex;
    flex-direction: column-reverse !important;
  }
  .breadcrumbs .category-name{
    padding-bottom: 16px;
  }
  body[class*="product-category"] .breadcrumbs .zem-svc-bc--listing,
  body.blog-blog .zem-svc-bc--listing{
    justify-content: center;
  }
  body .zem-sidebar .zem-cat-nav.is-open .zem-cat-nav__list{
    max-height: 35vh;
  }
  #zem-product-page .zem-tab-btn {
    font: 400 16px/1 Montserrat, sans-serif !important;
  }
  body .zem-product-main{
    padding-bottom: 0px !important;
  }
  .zem-product-container div#zem-tab-desc{
    padding-bottom: 0px;
  }
  div#zem-product-page .zem-product-services{
    padding-top: 0px;
    padding-bottom: 24px;
    overflow: visible;
  }
  div#zem-product-page .zem-services.zem-services-dop{
    padding-top: 0px;
    padding-bottom: 24px;
    overflow: visible;
  }
  div#zem-product-page .zem-services-more {
    overflow: visible;
    padding-bottom: 6px;
  }
  div#zem-product-page .zem-related{
    padding-top: 0px;
  }
  body[class*="information-information"] .breadcrumbs .container ul.breadcrumb{
    text-align: center;
  }
  body[class*="product-product"] .breadcrumbs .container{
    flex-direction: column !important;
  }
  /* blog single + service leaf: JS builds correct top→bottom DOM (title, bc, meta) — don't reverse */
  body.blog-article .breadcrumbs .container,
  body[class*="product-category-162_"] .breadcrumbs .container{
    flex-direction: column !important;
  }
  .zem-svc-block.zem-svc-block--search.is-open form.zem-svc-search button svg{
    width: 20px;
    height: 20px;
  }
  body[class*="product-category"] .breadcrumbs .category-name,
  body.blog-blog .breadcrumbs .category-name, body.blog-blog .category-name{
    margin-bottom: 0px !important;
  }
  body.product-category-162 aside.zem-svc-sidebar,
  body.blog-blog.home1 aside.zem-svc-sidebar{
    margin-top: 24px;
  }
  body[class*="product-category-162_"] .zem-cat-desc.zem-svc-body{
    margin-top: 12px;
  }
  body.blog-article .zem-blog-main {
    gap: 0px;
  }
}

@media (max-width: 480px) {
  .home1 .banner7-content .title1,
  .home1 .banner7-content .sub-title,
  .home1 .banner7-content .banner7-des p span {
    font-size: 20px !important;
  }

  .home1 .section-header,
  .home1 .zem-section-title,
  .home1 .zem-cat-banners.zem-cat-dyn .zem-section-title a,
  .home1 .zem-services.zem-services-dop .zem-section-title a{
    font-size: 20px !important;
  }

  .home1 .zem-service-tile {
    height: 170px;
    min-height: 170px;
  }

  .home1 .zem-service-tile img {
    /*height: 170px;*/
    min-height: 170px;
  }

  /* keep benefits 2-col even on small phones (override stylesheet.css 575px 1-col) */
  .home1 .zem-benefits .zem-benefit-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}