.elementor-21094 .elementor-element.elementor-element-c4a6edb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0%;--padding-bottom:0%;--padding-left:4%;--padding-right:4%;}/* Start custom CSS for html, class: .elementor-element-e0390e8 */.search-cate {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background-color: #fff;
      max-width: 500px;
      margin: 35px 0px;
    }
    .search-cate img { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
    .search-cate input {
      border: none; outline: none; flex: 1; font-size: 16px; font-family: inherit; color: #111827;
    }
    .search-cate input::placeholder { color: #6b7280; }

    .products-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }
    .cate-custom { font-family: "Inter Tight", Sans-serif; }
    .product-card { width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; background:#fff; }
    .product-card h2 { margin: 8px 0 0; font-weight: 400; color: #667085; font-size: 16px; }
    .product-card h4 { margin: 12px 0 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    height: 80px; }
    .product-card h5 { margin: 10px 0; font-size: 21px; font-weight: 600; font-family: "Inter Tight", Sans-serif; }
    .product-card a { display: flex; align-items: center; margin: 0; gap: 6px; color: #101828; font-size: 17px; font-weight: 500; }

    .cate-custom h5 span { font-weight: 400; }
    .cate-filters ul {
    display: flex;
    margin: 0;
    gap: 10px;
    flex-wrap: wrap;
}
    .cate-name li { list-style: none; }
   .cate-name ul li a {
    border: 1px solid #e3e3e3;
    padding: 6px 15px;
    border-radius: 10px;
    color: #667085;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s ease all;
    display: block;
}
    .cate-name ul li a:hover { border: 1px solid #101828; color: #101828; }
    .cate-tag { display: flex; margin: 25px 0; gap: 14px; flex-wrap: wrap; }
    .cate-tag div {
      background-color: #F2F4F7; padding: 7px 18px; display: flex; align-items: center; gap: 10px;
      border-radius: 20px; color: #667085; font-weight: 500; transition: 0.5s ease all;
    }
    .cate-tag div:hover { background-color: #eae1f9; }
    .cate-heading h3 { margin: 0; font-size: 32px; font-weight: 500; color: #101828; }
    .cate-heading p { margin: 10px 0 0; font-size: 20px; line-height: 30px; color: #667085; }
    .cate-heading { margin: 30px 0; }
    .cate-blocks { display: flex; align-items: start; gap: 12px; }

    img.pro-img { border-radius: 7px; object-fit: contain; width: 100%; height: 100%; }

    .left-filter-sidebar button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0px 35px 0px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    color: #242424;
    /* width: 100%; */
    line-height: 0px;
    transition: 0.3s ease all;
}
.left-filter-sidebar button:hover {
    background: none;
    border-radius: 10px;
    color: #000;
    border: 1px solid #000000;
}
    .left-filter-sidebar button img { width: 18px; height: 18px; }

    .load_more {
      margin: 28px auto 60px; display: inline-flex; align-items: center; justify-content: center;
      gap: 10px; font-family: "Inter Tight", Sans-serif; color: #fff; background:#101828; border:1px solid #101828;
      font-weight: 600; font-size: 16px; cursor: pointer; transition: .25s; border-radius: 10px; padding: 10px 16px;
    }
    .load_more:disabled { opacity: .6; cursor: not-allowed; }

    /* ---------- Filter Drawer + Backdrop ---------- */
    .filter-backdrop {
      position: fixed; inset: 0; background: rgba(15,23,42,.45);
      opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 100001;
    }
    .filter-backdrop.show { opacity: 1; pointer-events: auto; }

    .filter-drawer {
      position: fixed; top: 0; left: 0;
      height: 100dvh; width: 340px; max-width: 92vw;
      background: #fff; border-right: 1px solid #edf2f7;
      box-shadow: 0 10px 30px rgba(2,6,23,.08);
      transform: translateX(-105%); transition: transform .28s ease; z-index: 100002;
      display: flex; flex-direction: column; font-family: "Inter Tight", Sans-serif; padding: 25px;
    }
    .filter-drawer.open { transform: translateX(0); }

    .drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 18px; border-bottom: 1px solid #f1f5f9;
    }
    .drawer-title { font-size: 18px; font-weight: 600; color: #0f172a; }
    .drawer-close { appearance: none; border: 0; background: none !important; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; }
    .drawer-close:hover { background: #f8fafc; }

    .drawer-body { padding: 8px 18px 120px; overflow: auto; flex: 1; }
    details { border-bottom: 1px solid #f1f5f9; padding: 14px 0; }
    summary {
      list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
      font-weight: 500; color: #0f172a;
    }
    summary::-webkit-details-marker { display: none; }
    .caret { width: 16px; height: 16px; transition: transform .2s ease; opacity: .7; }
    details[open] .caret { transform: rotate(180deg); }
    .check-row { display: grid; gap: 10px; padding: 12px 0 4px; font-size: 15px; }
    label { display: flex; align-items: center; gap: 10px; color: #334155; }
    input[type="checkbox"] { width: 16px; height: 16px; }

    .drawer-footer {
      position: sticky; bottom: 0; padding: 14px 18px 18px;
      background: linear-gradient(to top, #fff 70%, rgba(255,255,255,.8) 100%);
      border-top: 1px solid #f1f5f9; display: grid; gap: 10px;
    }
    .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 600; border: 1px solid transparent; cursor: pointer; }
    .btn-clear { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; gap: 8px; }
    .btn-primary { background: #0b1222; color: #fff; }

    button.show-result-btn { background-color: black; border-radius: 5px; border: none; color:#fff; }
    button.show-result-btn:hover { background-color: #363636; }
    button.clear-result-btn { border-radius: 5px; background-color: white; color: #475467; border: 1px solid #EAECF0; }
    button.clear-result-btn:hover { background-color: #edecec; color: #000; }

    /* gift widget resets kept as-is (if you need them) */
    #gift-widget .add-btn, #gift-widget .btn-step { all: unset; -webkit-appearance: none; appearance: none; text-decoration: none; font: inherit; color: inherit; }
    #gift-widget .add-btn img{ width:20px; height:20px; }
    #gift-widget .btn-step {
      display: grid; place-items: center; width: 32px; height: 32px; background: #EAECF0 !important; border-radius: 8px; cursor: pointer;
      font-size: 20px; line-height: 1; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 1px rgba(16, 24, 40, .04);
    }
    #gift-widget .btn-step:active{ transform: translateY(1px) scale(.98); }
    #gift-widget .add-btn:focus-visible, #gift-widget .btn-step:focus-visible{ outline:2px solid #7c3aed; outline-offset:2px; }

    /* ---------- Skeleton Loading ---------- */
    .products_div { position: relative; }
    .is-skeleton {
      position: relative; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; background: #fff;
    }
    .is-skeleton::after {
      content: ""; position: absolute; inset: 0; transform: translateX(-100%);
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
      animation: sk-shimmer 1.2s infinite;
    }
    @keyframes sk-shimmer { to { transform: translateX(100%); } }

    .skel { background: #e5e7eb; border-radius: 8px; }
    .cate-pro-img { aspect-ratio: 5 / 4; width: 100%; border-radius: 8px; overflow: hidden;  margin-bottom: 12px; }
    .skel-line { height: 14px; margin: 10px 0; }
    .w-40 { width: 40%; } .w-60 { width: 60%; } .w-80 { width: 80%; }
    .skel-btn { height: 40px; width: 140px; border-radius: 10px; margin-top: 10px; }

    /* ---------- Responsive ---------- */
    @media (max-width: 1024px) { .products-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 768px) { .products-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 480px) { .products-row { grid-template-columns: 1fr; } }
    
    
    
    .bs-breadcrumb {
    font-family: inherit;
    margin-top: 25px;
}
.bs-bc-list { display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none; }
.bs-bc-item { display:flex; align-items:center; }

/* separators */
.bs-bc-item + .bs-bc-item::before {
  content: "›";
  margin: 0 10px;
  color: #94a3b8; /* subtle grey */
  line-height: 1;
}

/* links */
.bs-bc-link {
    text-decoration: none;
    color: #101828;
    font-weight: 500;
    font-size: 18px;
}
.bs-bc-link:hover { text-decoration: underline; }

/* last crumb (current page) */
.bs-bc-current {
    color: #667085;
    font-weight: 500;
    font-size: 18px;
}

/* home icon alignment */
.bs-bc-home { display:inline-flex; align-items:center; }

/* screen-reader-only text */
.bs-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

button.load_more_btn {
    /* margin: auto; */
    background: none;
    color: #667085;
    border: none;
    font-family: "Inter Tight", Sans-serif;
    font-size: 18px;
    padding: 0px;
    display: flex;
    gap: 7px;
    align-items: center;
    transition: 0.3s ease all;
}
button.load_more_btn:hover {
    background: none;
    color: #000000;
}
.load-btn-div {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 35px 0px;
    align-items: center;
}
.load-btn-div svg {
    width: 20px;
    fill: #667085;
    transition: 0.3s ease all;
}
.load-btn-div svg:hover {
    fill: #000;
}


.cate-pro-img a {
    display: inline;
}


/* ======================================================
   CATALOG PAGE — RESPONSIVE ENHANCEMENTS (append only)
   Keeps desktop as-is; targets tablets/phones.
   ====================================================== */

/* Safe image scaling everywhere */
/*.cate-custom img{ max-width:100%; height:auto; }*/

/* 1) Search: full width on small screens */
@media (max-width: 768px){
  .search-cate{
    width:100%;
    max-width:100%;
    margin:16px 0;
  }
  .search-cate input{ font-size:16px; }
}

/* 2) Product grid breakpoints (desktop unchanged) */
@media (max-width: 1024px){
  .products-row{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
}
@media (max-width: 768px){
  .products-row{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
}
@media (max-width: 480px){
  .products-row{ grid-template-columns: 1fr; gap:12px; }
}

/* 3) Card text + spacing on small screens */
@media (max-width: 768px){
  .product-card{ padding:12px; }
  .product-card h4{
    font-size:16px; line-height:22px;
    height:auto;                           /* drop fixed 80px */
    display:-webkit-box;                   /* 2-line clamp */
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .product-card h5{ font-size:18px; }
  .product-card a{ font-size:16px; }
}

/* 4) No sideways scroll from long words/links */
.cate-custom{ overflow-x:hidden; }
.products-row, .product-card{ min-width:0; }
.product-card h2, .product-card h4{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 5) Filter drawer: mobile-friendly scrolling */
@media (max-width: 900px){
  .filter-drawer{
    width: 90vw;
    max-width: 360px;
    height: 100dvh;               /* dynamic viewport on mobile */
  }
  .drawer-body{
    max-height: calc(100dvh - 140px); /* header+footer space */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .filter-backdrop{
    backdrop-filter: blur(2px);
  }
}

/* Mobile: filter + horizontally scrollable chips */
@media (max-width: 768px){
  .cate-blocks{
    display: block;
    align-items: center;
    gap: 10px;
  }

  /* Button keeps its size */
  .left-filter-sidebar{ flex: 0 0 auto; margin-bottom: 15px; }
  .left-filter-sidebar button{
    padding: 0 12px;         /* slimmer on phones */
    height: 40px;
  }

  /* Category area takes the rest of the row */
  .cate-name{
    flex: 1 1 0;
    min-width: 0;            /* ← critical so the inner scroller can shrink */
  }

  /* The actual scroller */
  .cate-name .cat_li{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 0;
    padding: 4px 2px 8px;

    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pinch-zoom;   /* smooth horizontal pan */
    scroll-snap-type: x proximity;
  }
  .cate-name .cat_li li{ flex: 0 0 auto; scroll-snap-align: start; }
  .cate-name .cat_li li a{ white-space: nowrap; }
  .cate-name .cat_li::-webkit-scrollbar{ display: none; } /* hide bar */
}



/* 6) Breadcrumb sizing on small screens */
@media (max-width: 600px){
  .bs-bc-link, .bs-bc-current{ font-size:16px; }
}

/* 7) Touch targets */
@media (max-width: 480px){
  .left-filter-sidebar button{
    height:44px;
    padding:0 14px;
  }
}

/* 8) Skeletons: let aspect ratio govern height on phones */
@media (max-width: 600px){
  .cate-pro-img{ aspect-ratio:4 / 3; }
  .skel-line{ height:12px; }
  .skel-btn{ height:36px; width:120px; }
}

/* 9) Final guard: kill any stray side scroll on tiny devices */
@media (max-width: 600px){
  html, body{ overflow-x:hidden; }
}/* End custom CSS */