/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com/
Description: Child theme for Hello Elementor
Author: Shikha
Author URI: https://example.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* Large desktops */
@media (min-width: 1400px) {
    .container {
        max-width: 1340px;
    }
}

/* Laptops / small desktops */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container {
        max-width: 1200px;
    }
}

/* Tablets landscape */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
}

/* Tablets portrait */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .container {
        max-width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
.cat-page-heading {
    padding-top: 40px;
    padding-bottom: 60px;
    }
}

.cat-page-heading {
    padding-top: 60px;
    padding-bottom: 70px;
    background-color: #005796;
    margin-bottom: 76px;
    color: white;
text-align: center;
}
.cat-page-heading h2 {
    color: white !important;
}
.cat-product-grid
 {
    margin-bottom: 100px;
}


/* DIstributor css */

.km-map-wrap svg {
         width: 100%;
         height: auto;
         display: block
      }

      .km-map-wrap .km-state {
         fill: #1b9ac7;
         stroke: #fff;
         stroke-width: 2;
         cursor: pointer;
         transition: fill .18s ease, opacity .18s ease;
      }

      .km-map-wrap .km-state:hover {
         fill: #137a9e
      }

      .km-map-wrap .km-state.km-active {
         fill: #ff8c00
      }

      .km-map-wrap .km-state.km-disabled {
         fill: #cfd8dc;
         cursor: not-allowed;
         opacity: .85;
      }

      .km-map-wrap .km-name {
         font-size: 11px;
         font-weight: 700;
         fill: #ffffff;
         pointer-events: none;
         text-anchor: middle;
         dominant-baseline: middle;
         paint-order: stroke;
         stroke: rgba(0, 0, 0, .35);
         stroke-width: 2px;
      }

      .km-modal {
         position: fixed;
         inset: 0;
         display: none;
         z-index: 99999
      }

      .km-modal.is-open {
         display: block
      }

      .km-modal-overlay {
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, .55)
      }

      .km-modal-dialog {
         position: relative;
         width: min(900px, calc(100% - 28px));
         margin: 20vh auto;
         background: #fff;
         border-radius: 10px;
         box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
         overflow: hidden;
/*          height: 500px; */
      }

      .km-modal-close {
         position: absolute;
         right: 12px;
         top: 10px;
         border: 0;
         background: transparent;
         font-size: 26px;
         line-height: 1;
         cursor: pointer;
         color: #888;
      }

      .km-modal-close:hover {
         color: #ffffff;
         background-color: #005796;
      }

      .km-modal-header {
         padding: 16px 18px;
         border-bottom: 1px solid #eee;
         text-align: center;
      }

      .km-modal-title {
         font-size: 22px;
         font-weight: 800;
         margin: 0;
         color: rgb(0, 87, 150);
      }

      .km-modal-body {
         padding: 18px;
         max-height: 47vh;
         overflow: auto;
      }

      .km-dist {
         padding: 8px 0 6px 8px;
         border-bottom: 1px solid #eee
      }

      .km-dist:last-child {
         border-bottom: none
      }

      .km-dist-title {
         font-weight: 500;
         font-size: 18px;
         margin: 4px 0 10px;
         text-transform: uppercase;
         color: rgb(0, 87, 150);
      }

      .km-dist-row {
         margin: 6px 0;
         font-size: 16px;
         color: #111
      }

      .km-empty {
         padding: 12px;
         background: #fff7e6;
         border: 1px solid #ffd59a;
         border-radius: 8px
      }

      .km-loading {
         color: #555
      }



/* Single product page css */

/* ====== Layout ====== */
      .product-cs-prodcut-info-section {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse;
      }

      .product-cs-km-tabsArea {
        background: #dbeafe;
        padding: 18px;
        width: 80%
      }

      .product-cs-km-sideBtns {
        width: 20%;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .product-cs-km-sideBtn-sec {
        background: #015897;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 7px 18px;
      }

      .product-cs-km-sideBtn {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 14px;
        font-weight: 700;
      }

      .product-cs-km-sideBtn:hover {
        color: #fff !important
      }

      /* ====== Tabs ====== */
      .product-cs-km-tabsHead {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
        margin-bottom: 14px
      }

      .product-cs-km-tabBtn {
        background: #fff;
        border: 1px solid #93c5fd;
        border-radius: 8px;
        padding: 10px 14px;
        font-weight: 600;
        cursor: pointer;
      }

      .product-cs-km-tabBtn.active {
        background: #015897;
        color: #fff;
        border-color: #1d4ed8
      }

      .product-cs-km-tabPanel {
        display: none;
        background: #fff;
        border-radius: 10px;
        padding: 16px
      }

      .product-cs-km-tabPanel.active {
        display: block
      }

      /* ====== Tables ====== */
      .product-cs-km-tableWrap {
        overflow: auto
      }

      .product-cs-km-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff
      }

      .product-cs-km-table th,
      .product-cs-km-table td {
        border: 1px solid #d1d5db;
        padding: 12px 10px;
        text-align: left;
        vertical-align: top;
      }

      .product-cs-km-table th {
        background: #eaf2f9;
        font-weight: 800;
        color: #0f172a
      }

      .product-cs-km-partImg {
        max-width: 220px;
        height: auto;
        display: block
      }

      /* ====== Gallery basic styles (if you use [km_cooling_gallery]) ====== */
      .product-cs-km-gallery {
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 14px;
        background: #fff
      }

      .product-cs-km-mainimg {
        width: 100%;
        aspect-ratio: 4/3;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 8px;
        background: #f9fafb
      }

      .product-cs-km-mainimg img {
        width: 100%;
        height: 100%;
        object-fit: contain
      }

      .product-cs-km-thumbs {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        flex-wrap: wrap
      }

      .product-cs-km-thumb {
        width: 70px;
        height: 55px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        background: #fff
      }

      .product-cs-km-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain
      }

      .product-cs-km-thumb.active {
        outline: 2px solid #1d4ed8;
        outline-offset: 1px
      }

      /* ====== Lightbox ====== */
      .product-cs-km-lightbox-trigger {
        display: inline-block
      }

      .product-cs-km-lightbox-trigger img {
        cursor: zoom-in
      }

      .product-cs-km-lightbox {
        position: fixed;
        inset: 0;
        z-index: 999999;
        background: rgba(0, 0, 0, .75);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }

      .product-cs-km-lightbox.is-open {
        display: flex
      }

      .product-cs-km-lightbox img {
        max-width: min(1100px, 95vw);
        max-height: 90vh;
        width: auto;
        height: auto;
        border-radius: 10px;
        background: #fff;
      }

      .product-cs-km-lightbox-close {
        position: absolute;
        top: 109px;
        right: 18px;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 0;
        cursor: pointer;
        background: #fff;
        font-size: 22px;
        line-height: 44px;
      }

      button.product-cs-km-lightbox-close {
        color: white;
        border-color: white;
        border-radius: 61px;
        padding: 1px;
      }

      /* ====== Responsive ====== */
      @media(max-width:980px) {
        .product-cs-prodcut-info-section {
          flex-direction: column
        }

        .product-cs-km-tabsArea,
        .product-cs-km-sideBtns {
          width: 100%
        }
      }
button.km-modal-close:hover {
    background-color: #005796;
}
      /* Tabs horizontal scroll on mobile */
      @media (max-width: 767px) {
        .product-cs-km-tabsHead {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          gap: 10px;
          padding-bottom: 8px;
        }

        .product-cs-km-tabsHead button {
          flex: 0 0 auto;
          white-space: nowrap;
        }

        .product-cs-km-tabsHead::-webkit-scrollbar {
          display: none
        }

        .product-cs-prodcut-info-section {

          flex-direction: column-reverse !important;
        }
      }

      /* Parts table: make it scrollable + keep picture & length readable on mobile */
      @media (max-width: 767px) {
        .product-cs-km-tableWrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        .product-cs-km-table {
          min-width: 720px;
          width: 100%;
          table-layout: fixed;
          border-collapse: collapse;
        }

        .product-cs-km-table th:nth-child(2),
        .product-cs-km-table td.product-cs-col-picture {
          width: 220px !important;
          min-width: 220px;
        }

        .product-cs-km-table th:nth-child(4),
        .product-cs-km-table td:nth-child(4) {
          width: 120px !important;
          min-width: 120px;
          white-space: nowrap;
        }

        .product-cs-km-table td.product-cs-col-picture img {
          max-width: 100%;
          height: auto;
          display: block;
        }

        .product-cs-km-tableWrap::-webkit-scrollbar {
          display: none
        }
      }