/* ========================================
        Main Product Page Layout CSS
   ========================================*/

    :root {
      --main-blue: #00457C;
      --nav-bg: #e6e4df;
      --nav-link: #222;
      --nav-link-light: #222;
      --hover-blue: #00457C;
      --focus-blue: #135ea8;
      --dropdown-bg: rgba(0, 69, 124, 0.97);
      --sidebar-bg: #f7f7f7;
      --sidebar-active: #184aff;
      --sidebar-border: #e3e7f3;
      --sidebar-text: #222;
      --sidebar-hover: #e7eeff;
      --sidebar-active-bg: #fff;
      --desc-grey: #848484;
      --primary-blue: #245ce6;
      --text-base: 15px;
      --text-small: 13.7px;
      --sidebar-font: 15.4px;       
      --sidebar-font-mobile: 14.2px;
      --heading-lg: 2.15rem;
      --heading-md: 1.14rem;
      --feature-li: 15px;
      --anim-duration: .75s;
      --top-video-height: 470px;
      --top-video-mobile: 230px;
      --sidebar-width: 246px;
    }
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Poppins', Arial, sans-serif;
      background: #fff;
      color: #181a20;
      height: 100%;
      min-height: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
      font-size: var(--text-base);
      scroll-behavior: smooth;
    }
    .top-video-section {
      width: 100%;
      height: 90%;
      min-height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(120deg, #eaf1ff 70%, #c4e1ff 100%);
      position: relative;
      z-index: 3;
      border-bottom: 2px solid #e3e7f3;
      overflow: hidden;
    }
    .top-video-wrap {
      width: 100vw;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: transparent;
      max-width: 1920px;
      margin: 0 auto;
    }
    .top-video-hero {
      width: 100vw;
      height: 100%;
      min-height: 340px;
      max-height: 100%;
      object-fit: cover;
      border-radius: 0;
      box-shadow: 0 3px 26px #245ce613;
      background: #dde8f5;
      display: block;
    }
    .top-video-section::before {
      content: "";
      position: absolute;
      left: 0; top: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg,rgba(245,250,255,0.13) 50%,rgba(210,226,255,0.10) 100%);
      z-index: 2;
      pointer-events: none;
    }
    @media (max-width: 1200px) {
      .top-video-wrap, .top-video-hero { max-width: 100vw; }
    }
    @media (max-width: 900px) {
      .top-video-section {
        height: var(--top-video-mobile);
        min-height: 120px;
      }
      .top-video-hero {
        min-height: 120px;
        max-height: 270px;
      }
    }
    @media (max-width: 600px) {
      .top-video-section {
        height: auto;
        width: 100%;
      }
      .top-video-hero {
        min-height: 70px;
        height: 88vw;
      }
    }
    .layout-root {
      display: flex;
      min-height: 100vh;
      background: #fff;
      box-sizing: border-box;
      position: relative;
    }
    .sidebar {
      width: var(--sidebar-width);
      background: var(--sidebar-bg);
      border-right: 1.5px solid var(--sidebar-border);
      box-shadow: 0 2px 32px #0001;
      padding: 38px 0 32px 0;
      min-height: calc(100vh - 56px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: sticky;
      top: 0;
      z-index: 2;
      height: 100vh;
      max-height: 100vh;
      overflow-y: auto;
      transition: box-shadow .18s;
    }
    .sidebar h2 {
      font-size: var(--heading-md);
      font-weight: 700;
      padding-left: 28px;
      margin: 0 0 23px 0;
      letter-spacing: 0.01em;
    }
    .cat-list {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .cat-item {
      margin-bottom: 3px;
      width: 100%;
      overflow: hidden;
    }
    .cat-link {
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      display: block;
      font-size: 13.5px;
      color: var(--sidebar-text);
      font-weight: 500;
      padding: 10px 0 10px 28px;
      width: 100%;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
      border-left: 4px solid transparent;
      border-radius: 0 8px 8px 0;
      text-align: left;
      transition: background .12s, color .12s, border .11s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-decoration: none;
      box-sizing: border-box;
      max-width: 96%;
    }
    .cat-link.active, .cat-link:focus {
      background: var(--sidebar-active-bg);
      color: var(--sidebar-active);
      border-left: 4px solid var(--sidebar-active);
      font-weight: 700;
      box-shadow: 0 1px 12px #e7eaff17;
    }
    .cat-link:hover:not(.active) {
      color: var(--sidebar-active);
      background: var(--sidebar-hover);
      border-left: 4px solid #b7cefa;
      text-decoration: none;
    }
    @media (max-width: 900px) {
      .layout-root {
        flex-direction: column;
      }
      .sidebar {
        width: 100vw;
        min-height: unset;
        border-right: none;
        border-bottom: 1.5px solid var(--sidebar-border);
        box-shadow: 0 2px 16px #0001;
        padding: 18px 0 10px 0;
        position: static;
        top: unset;
        height: auto;
        max-height: unset;
        overflow-y: unset;
      }
      .sidebar h2 {
        padding-left: 16px;
        margin-bottom: 11px;
      }
      .cat-link {
        padding: 10px 0 10px 16px;
        font-size: var(--sidebar-font-mobile);
        max-width: 99vw;
      }
    }
    @media (max-width: 600px) {
      .sidebar {
        padding: 10px 0 5px 0;
      }
      .sidebar h2 {
        font-size: 1.08rem;
        margin-bottom: 7px;
      }
      .cat-link {
        font-size: 13px;
        padding: 8px 0 8px 12px;
      }
    }
    .main-section {
      flex: 1 1 0;
      padding: 52px 40px 38px 52px;
      max-width: 1100px;
      min-width: 0;
      font-size: var(--text-base);
      min-height: 100vh;
      background: #fff;
    }
    @media (max-width: 900px) {
      .main-section {
        padding: 16px 2vw 15vw 2vw;
        min-height: unset;
      }
    }
    @media (max-width: 600px) {
      .main-section {
        padding: 8vw 4vw 9vw 4vw;
      }
    }
    .back-link {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #555e6a;
      font-size: var(--text-small);
      font-weight: 400;
      text-decoration: none;
      margin-bottom: 15px;
      margin-top: 0;
      transition: color 0.14s;
      cursor: pointer;
      user-select: none;
      letter-spacing: 0.01em;
      opacity: 0;
      transform: translateY(-30px);
      transition: all var(--anim-duration) cubic-bezier(.17,.67,.23,1.11);
    }
    .back-link.in-view { opacity: 1; transform: translateY(0);}
    .page-title {
      color: #184aff;
      font-size: var(--heading-lg);
      font-weight: 700;
      margin: 0 0 18px 0;
      font-family: 'Poppins', Arial, sans-serif;
      display: flex;
      align-items: center;
      gap: 0.18em;
      line-height: 1.18;
      letter-spacing: -0.005em;
      opacity: 0;
      transform: translateY(-25px) scale(.98);
      transition: all var(--anim-duration) cubic-bezier(.17,.67,.23,1.11);
      text-wrap: balance;
      justify-content: center;
      text-align: center;
      scroll-margin-top: 16px;
    }
    .page-title.in-view { opacity: 1; transform: translateY(0) scale(1);}
    .page-title .divider {
      color: #232323;
      font-weight: 400;
      margin: 0 0.17em;
      font-size: 1.03em;
      letter-spacing: 0;
    }
    .desc-lead {
      font-size: var(--text-base);
      /* color: var(--desc-grey); */
      color: #585858;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      margin-bottom: 0;
      margin-top: 2px;
      font-weight: 400;
      max-width: 940px;
      /* line-height: 1.56; */
      line-height: 24px;
      opacity: 0;
      transform: translateX(-42px);
      transition: all var(--anim-duration) cubic-bezier(.22,.67,.23,1.11);
      text-wrap: pretty;
    }
    .desc-lead.in-view { opacity: 1; transform: translateX(0);}
    .media-desc-row {
      display: flex;
      flex-direction: row;
      gap: 34px;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 22px;
      margin-top: 10px;
    }
    .media-desc-col {
      flex: 1 1 0;
      min-width: 0;
    }
    .image-col {
      max-width: 52%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .product-main-img {
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      box-shadow: 0 3px 18px #dde6fa33;
      background: #e6eefa;
      display: block;
    }
    .video-desc-col {
      max-width: 48%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .video-wrapper {
      width: 100%;
      background: #000;
      border-radius: 8px;
      overflow: hidden;
      /* margin-bottom: 14px; */
      align-items: center;
    }
    .custom-lead {
      font-size: 1rem;
      color: #3e3e3e;
      margin-top: 0;
      margin-bottom: 0;
      line-height: 1.54;
      opacity: 1;
      transform: none;
      transition: none;
      max-width: 99%;
      text-wrap: pretty;
    }
    @media (max-width: 900px) {
      .media-desc-row {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
      }
      .image-col, .video-desc-col {
        max-width: 100%;
        width: 100%;
      }
      .video-wrapper iframe {
        min-height: 180px;
        height: 41vw;
        max-height: 250px;
      }
      .desc-lead, .custom-lead { text-align: justify; hyphens: auto; }
    }
    @media (max-width: 600px) {
      .media-desc-row {
        gap: 10px;
        margin-bottom: 10px;
      }
      .video-wrapper iframe {
        min-height: 140px;
        height: 38vw;
        max-height: 170px;
      }
      .desc-lead, .custom-lead { text-align: left; hyphens: auto; }
    }
    .key-features-section {
      margin-top: 52px;
      margin-bottom: 10px;
      opacity: 0;
      transform: translateY(40px) scale(.96);
      transition: all var(--anim-duration) cubic-bezier(.21,.64,.19,1.1);
    }
    .key-features-section.in-view {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .key-features-title {
      font-size: var(--heading-md);
      font-weight: 700;
      color: #232323;
      margin-bottom: 16px;
      letter-spacing: 0.01em;
    }
    .feature-list {
      padding-left: 18px;
      margin-top: 0;
      margin-bottom: 30px;
    }
    .feature-list li {
      font-size: var(--feature-li);
      color: #3e3e3e;
      margin-bottom: 5px;
      line-height: 1.6;
      font-weight: 400;
      letter-spacing: 0.02em;
      max-width: 820px;
    }
    .feature-actions {
      display: flex;
      gap: 23px;
      margin-top: 20px;
      margin-bottom: 5px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .feature-btn {
      background: #245ce6;
      color: #fff;
      font-family: 'Poppins', Arial, sans-serif;
      font-size: var(--text-base);
      font-weight: 600;
      border: none;
      border-radius: 2.5px;
      padding: 12px 32px;
      cursor: pointer;
      transition: background .13s, box-shadow .12s;
      box-shadow: 0 2px 12px #e8eefa22;
      letter-spacing: 0.01em;
      display: flex;
      align-items: center;
      gap: 8px;
      text-align: center;
      justify-content: center;
    }
    .feature-btn:active, .feature-btn:focus { outline: none; }
    .feature-btn:hover { background: #184aff; }
    .feature-btn.secondary {
      background: #fff;
      color: #245ce6;
      border: 2px solid #245ce6;
      box-shadow: none;
      font-weight: 600;
      justify-content: center;
    }
    .feature-btn.secondary:hover { background: #e8f0ff; color: #184aff; border-color: #184aff; }
    .see-action-section {
      margin-top: 48px;
      margin-bottom: 0;
      width: 100%;
      opacity: 0;
      transform: translateY(44px) scale(.94);
      transition: all var(--anim-duration) cubic-bezier(.22,.65,.16,1.07);
    }
    .see-action-section.in-view { opacity: 1; transform: translateY(0) scale(1);}
    .see-action-title {
      font-size: 2.1rem;
      font-weight: 700;
      color: #181a20;
      margin-bottom: 18px;
      margin-left: 0;
      margin-top: 0;
      font-family: 'Poppins', Arial, sans-serif;
      letter-spacing: 0;
    }
    .see-action-video-wrap {
      width: 100%;
      background: #ececec;
      border-radius: 0;
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 10px;
      box-sizing: border-box;
      max-width: 740px;
      margin-left: auto;
      margin-right: auto;
      aspect-ratio: 16/8;
    }
    .see-action-video-iframe {
      width: 74vw;
      max-width: 730px;
      min-width: 210px;
      min-height: 180px;
      aspect-ratio: 16 / 8;
      border: none;
      background: #ececec;
      display: block;
      border-radius: 0;
      z-index: 2;
    }
    .see-action-video-desc {
      position: absolute;
      left: 0; right: 0;
      top: 22%;
      text-align: center;
      color: #222;
      font-size: 15.1px;
      font-weight: 500;
      pointer-events: none;
      z-index: 2;
    }
    .related-products-section {
      margin-top: 60px;
      width: 100%;
      padding: 0;
      background: transparent;
      opacity: 0;
      transform: translateY(55px) scale(.97);
      transition: all 1.15s cubic-bezier(.22,.67,.23,1.11);
    }
    .related-products-section.in-view {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .related-products-title-wrap {
      text-align: center;
      margin-bottom: 36px;
      margin-top: 10px;
    }
    .related-products-title {
      font-size: 2.4rem;
      font-weight: 700;
      letter-spacing: 0;
      color: #181a20;
      margin: 0 auto 10px auto;
      font-family: 'Poppins', Arial, sans-serif;
      position: relative;
      display: inline-block;
      z-index: 1;
    }
    .related-products-title:after {
      content: '';
      display: block;
      margin: 13px auto 0 auto;
      width: 45px;
      height: 6px;
      border-radius: 3px;
      background: #245ce6;
      opacity: 1;
    }
    .related-products-list {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 26px;
      margin: 0 auto;
      flex-wrap: nowrap;
      box-sizing: border-box;
    }
    .related-product-card {
      position: relative;
      width: 410px;
      height: 390px;
      background: #f3f5fa;
      box-shadow: 0 5px 30px #1313130c;
      border-radius: 0;
      overflow: hidden;
      transition: box-shadow 0.21s, transform 0.23s cubic-bezier(.17,.67,.23,1.11);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      animation: cardFadeIn 1.2s cubic-bezier(.24,.83,.45,1.08);
    }
    .related-product-card:hover {
      box-shadow: 0 10px 38px #181a2022;
      transform: translateY(-7px) scale(1.017);
    }
    @keyframes cardFadeIn {
      from { opacity: 0; transform: translateY(40px) scale(.97);}
      to   { opacity: 1; transform: translateY(0) scale(1);}
    }
    .related-product-img {
      width: 100%;
      height: 315px;
      object-fit: cover;
      border-radius: 0;
      background: #f0f1f7;
      display: block;
      box-shadow: none;
    }
    .related-product-info {
      position: absolute;
      left: 0; bottom: 0;
      width: 72%;
      min-width: 260px;
      max-width: 300px;
      background: #fff;
      box-shadow: 0 8px 32px #002c5015;
      border-radius: 0;
      padding: 28px 22px 26px 24px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 9px;
      text-align: left;
      margin: 0 0 24px 30px;
    }
    .related-product-title {
      font-weight: 700;
      font-size: 1.16rem;
      margin-bottom: 5px;
      margin-top: 0;
      color: #181a20;
      font-family: 'Poppins', Arial, sans-serif;
    }
    .related-product-desc {
      font-size: 1.01rem;
      font-weight: 400;
      color: #444950;
      line-height: 1.58;
      margin-bottom: 0;
      margin-top: 0;
      font-family: 'Poppins', Arial, sans-serif;
    }
    .related-product-arrow {
      position: absolute;
      bottom: 0;
      right: 0;
      background: #2469ec;
      color: #fff;
      width: 48px;
      height: 48px;
      border-radius: 9px 0 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.1rem;
      font-weight: 600;
      box-shadow: 0 2px 12px #245ce63a;
      cursor: pointer;
      border: none;
      outline: none;
      z-index: 10;
      transition: background 0.17s;
    }
    .related-product-arrow:hover, .related-product-arrow:focus {
      background: #003bb8;
    }
    @media (max-width: 1200px) {
      .related-products-list { gap: 14px;}
      .related-product-card { width: 340px; height: 325px; }
      .related-product-img { height: 245px;}
      .related-products-title { font-size: 2rem;}
    }
    @media (max-width: 900px) {
      .related-products-list { flex-wrap: wrap; gap: 13px;}
      .related-product-card { width: 88vw; min-width: 0; max-width: 98vw; height: 320px;}
      .related-product-info { margin: 0 0 15px 13px; max-width: 89vw; }
      .related-product-img { height: 170px;}
    }
    @media (max-width: 650px) {
      .related-products-section { margin-top: 18px;}
      .related-products-title { font-size: 1.23rem;}
      .related-products-list { flex-direction: column; gap: 11px;}
      .related-product-card {  height: 268px;}
      .related-product-info { left: 0; right: 0; margin-left: 5vw; max-width: 95vw; padding: 14px 11px;}
      .related-product-img { height: 108px;}
      .related-product-arrow { width: 38px; height: 38px; font-size: 1.18rem;}
    }
    .main-section section { scroll-margin-top: 24px; }
    @media (max-width: 900px) {
      .main-section section { scroll-margin-top: 12px; }
    }

    /*==== Sidebar: independent scrolling ===*/
.sidebar{
  height: 100vh;                 /* already present, keep */
  overflow-y: auto;              /* already present, keep */
  overscroll-behavior: contain;  /* prevent scrolling the page when at ends */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}

/* Ensure headings stop nicely under the top edge when scrolled into view */
.page-title{ 
  scroll-margin-top: 24px;       /* same visual stop as your section rule */
}
@media (max-width: 900px){
  .page-title{ scroll-margin-top: 12px; }
}

/* Make only the list scroll, not the whole page */
.sidebar{
  position: sticky;      /* keep your current behavior */
  top: 0;
  display: flex;
  flex-direction: column;
}

.sidebar h2{ flex: 0 0 auto; }

/* <-- THIS is the independent scroller */
.cat-list{
  flex: 1 1 auto;
  max-height: calc(100vh - 110px); /* 100vh minus the header/padding in sidebar */
  overflow-y: auto;
  overscroll-behavior: contain;    /* stop scroll chaining to the page */
  -webkit-overflow-scrolling: touch;
}

/* keep main headings stopping at the right spot */
.page-title{ scroll-margin-top: 24px; }
@media (max-width: 900px){
  /* on mobile the sidebar becomes a top block; keep its list scrollable too */
  .cat-list{
    max-height: 42vh;              /* adjust as you like */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .page-title{ scroll-margin-top: 12px; }
}


/* Make only the list scroll, not the whole sidebar */
.sidebar{
  overflow: hidden;             /* stop the sidebar itself from scrolling */
  display: flex;
  flex-direction: column;
}

.sidebar h2{ flex: 0 0 auto; }

.cat-list{
  flex: 1 1 auto;
  min-height: 0;                /* <<< critical for flex child to be scrollable */
  overflow-y: auto;
  overscroll-behavior: contain; /* prevent scroll chaining */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 84px;         /* room so last item isn’t hidden by chat bubble */
}

/* Mobile: sidebar becomes a top block; keep list scrollable */
@media (max-width: 900px){
  .sidebar{ overflow: visible; } /* page scrolls naturally */
  .cat-list{
    max-height: 42vh;           /* your existing intent */
    min-height: 0;
    overflow-y: auto;
  }
}

/* ===== Mobile: page scrolls everything together ===== */
@media (max-width: 900px){
  .sidebar{
    position: static;     /* not sticky */
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;    /* sidebar itself doesn't scroll */
  }

  /* the list also stops being its own scroller */
  .cat-list{
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
    padding-bottom: 0;
  }
}
/* Main Products CSS End */

      /* updated code from here(buttons side by side) */
/* ===== MOBILE VIEW: Equal-width side-by-side buttons (Feature Actions) ===== */
@media (max-width: 768px) {
  .feature-actions {
    display: flex;
    flex-direction: row !important;   /* place side-by-side */
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;                        /* small gap between buttons */
  }

  .feature-actions .feature-btn,
  .feature-actions .brochure-download .feature-btn {
    flex: 1 1 50%;                    /* each takes 50% width */
    width: 50%;
    min-width: 0;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;              /* prevent wrapping */
    font-size: 14px !important;       /* smaller font size on mobile */
    padding: 10px 0;                  /* balanced height */
  }

  /* Ensure the <section> behaves like a flex container */
  .feature-actions .brochure-download {
    flex: 1 1 50%;
    width: 50%;
    display: flex;
    justify-content: center;
  }

  /* Remove any underline from anchor */
  .feature-actions .feature-btn {
    text-decoration: none !important;
  }
}


/* =========Sidebar minimise======== */

   /* Only minimal, isolated styles for mobile accordion */
    @media (max-width: 768px) {
      .ssm-acc-wrap {
        border-radius: 8px;
        background: #f6f7fb;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        margin-bottom: 16px;
      }

      .ssm-acc-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: #ffffff;
        border: none;
        cursor: pointer;
        font-family: 'Poppins', Arial, sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #111827;
      }

      .ssm-acc-trigger:focus {
        outline: 2px solid #245ce6;
        outline-offset: 2px;
      }

      .ssm-acc-arrow {
        display: inline-flex;
        width: 20px;
        height: 20px;
        align-items: center;
        justify-content: center;
        transition: transform 0.18s ease;
        user-select: none;
      }

      .ssm-acc-trigger[aria-expanded="true"] .ssm-acc-arrow {
        transform: rotate(180deg);
      }

      .ssm-acc-panel {
        display: none;
        padding: 6px 8px 10px 8px;
        background: #ffffff;
      }

      .ssm-acc-panel.ssm-open {
        display: block;
      }

      /* Make list look clean on mobile */
      .ssm-acc-panel .cat-list {
        list-style: none;
        margin: 0;
        padding: 6px 6px 10px 6px;
      }

      .ssm-acc-panel .cat-item + .cat-item {
        margin-top: 2px;
      }

      .ssm-acc-panel .cat-link {
        display: block;
        padding: 10px 10px;
        border-radius: 6px;
        text-decoration: none; /* keep links clean */
        color: #111827;
        font-family: 'Inter', Arial, sans-serif;
        font-weight: 500;
        background: #f8fafc;
      }

      .ssm-acc-panel .cat-link.active {
        background: #eaf0ff;
        color: #245ce6;
        font-weight: 600;
      }

      /* Hide original sidebar title on mobile (we inject our trigger) */
      .sidebar h2,
      .mobile-categories > h2 {
        display: none;
      }
    }

/* ====Middle Layout CSS=== */
  .layout-root {
  display: flex;
  min-height: 100vh;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  
  /* --- ADD THESE LINES --- */
  max-width: 1440px; /* Constrains the container's total width */
  margin-left: auto;   /* Automatically calculates left margin */
  margin-right: auto;  /* Automatically calculates right margin */
}