.elementor-21123 .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: 55px; }
    .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: 18px; 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 15px 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: 3 / 3; width: 100%; border-radius: 8px; overflow: hidden; background: #f3f4f6; 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;
}


/* Visually hide but keep accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Layout */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0; /* remove default fieldset border */
  padding: 0;
  margin: 0;
}

.category-buttons input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Button look */
.category-buttons label {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
    color: #525252;
   font-family: "Inter Tight", Sans-serif !important;
    cursor: pointer;
    transition: transform .02s 
ease, background .15s 
ease, border-color .15s 
ease, color .15s 
ease, box-shadow .15s 
ease;
}

.category-buttons label:hover {
  border-color: #9aa3af;
}

.category-buttons input[type="radio"]:focus + label {
  outline: 3px solid transparent;   /* reset */
  box-shadow: 0 0 0 3px rgba(200,173,255,.4); /* focus ring */
}

/* Active (checked) style */
.category-buttons input[type="radio"]:checked + label {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* Optional: tiny press effect */
.category-buttons label:active {
  transform: translateY(1px);
}



/* ================================
   RESPONSIVE ENHANCEMENTS (append)
   ================================ */

/* A) Search bar: full width on mobile */
@media (max-width: 768px){
  .search-cate{ width:100%; max-width:100%; margin:16px 0; }
}

/* B) Product grid steps (desktop unchanged) */
/* base: 4 cols (your current rule) */
@media (min-width: 1920px){
  /* Full HD+ → 5 cards */
  .products-row{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 1024px){
  /* already present in your CSS; kept here for clarity */
  .products-row{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@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; }
}

/* C) Card text/images on mobile */
@media (max-width: 768px){
  .product-card{ padding:12px; }
  .product-card h4{
    font-size:16px; line-height:22px; height:auto;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  img.pro-img{ height:auto !important; object-fit:contain !important; }
  .cate-pro-img{ aspect-ratio: 4 / 3; }
}

/* D) Filter drawer usability */
@media (max-width: 900px){
  .filter-drawer{ width:90vw; max-width:360px; height:100dvh; }
  .drawer-body{ max-height:calc(100dvh - 140px); overflow:auto; -webkit-overflow-scrolling:touch; }
  .filter-backdrop{ backdrop-filter:blur(2px); }
}

/* E) Skeletons: ratio-based on phones */
@media (max-width: 600px){
  .product-card.is-skeleton .cate-pro-img{ height:auto; aspect-ratio:4 / 3; }
  .skel-line{ height:12px; }
  .skel-btn{ height:36px; width:120px; }
}

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

/* G) Guards against sideways scroll */
@media (max-width: 768px){
  .cate-custom, .products-row, .product-card{ min-width:0; }
  html, body{ overflow-x:hidden; }
}

/* H) CATEGORIES: show pills on desktop, SELECT on mobile */
.cate-name .cat-select-wrap{ display:none; }
@media (max-width: 768px){
  .cate-blocks{ display:flex; align-items:center; gap:10px; }
  .left-filter-sidebar{ flex:0 0 auto; }
  .cate-name{ flex:1 1 0; min-width:0; }

  /* hide the pills and show the select */
  .cate-name .cat_li{ display:none !important; }
  .cate-name .cat-select-wrap{ display:block; }

  /* select styling */
  .cate-name .cat-select{
    width:100%;
    height:44px;
    padding:0 42px 0 12px;
    border:1px solid #e3e3e3;
    border-radius:10px;
    background:#fff;
    color:#667085;
    font: 500 15px/1.2 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;
  }
  .cate-name .cat-select:focus{
    outline:none; border-color:#101828; box-shadow:0 0 0 3px rgba(16,24,40,.08);
  }
}


/* Mobile: stack filter above chips + horizontal scroll */
@media (max-width: 600px){
  .cate-blocks{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .left-filter-sidebar{ order: 1; }
  .cate-name{ order: 2; min-width: 0; }     /* allow inner scroller to shrink */

  .cate-name .cat_li{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    margin: 0;
    padding: 0 2px 6px;

    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pinch-zoom;
    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; }

  /* hide scrollbar on WebKit; optional */
  .cate-name .cat_li::-webkit-scrollbar{ display: none; }
}

.drawer-header button {
    padding: 0px;
}
.drawer-header button:hover {
    border: none;
}
.drawer-footer button:hover {
    border-radius: 6px;
}

 .skel.skel-circle { width: 80px; height: 22px; border-radius: 6px; display:inline-block; }
  .tag-skel-row { display:flex; align-items:center; gap:.5rem; padding:.25rem 1rem; }
  /* width helpers in case you don't already have them */
  .skel-line.w-30 { width:50%; height:10px; border-radius:6px; display:inline-block; }
  .skel-line.w-30 { width:100%; height:50px; border-radius:6px; display:inline-block; }
  
  
  
  /* container layout (optional, tweak as you like) */
.cate-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* base chip look (optional) */
.cate-tag > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f4f7;
  border: 1px solid #e5e7eb;
  line-height: 1;
  will-change: transform, opacity;
  /* animate on insertion */
  animation: chip-in 220ms ease-out both;
}

/* the close icon sizing (optional) */
.cate-tag > div img {
  width: 14px; height: 14px;
  cursor: pointer;
}

/* ENTER animation plays automatically on append */
@keyframes chip-in {
  from { transform: translateY(8px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

/* LEAVE animation (trigger with JS by adding .leaving) */
.cate-tag > div.leaving {
  pointer-events: none;
  animation: chip-out 180ms ease-in forwards;
}
@keyframes chip-out {
  to { transform: translateY(8px) scale(0.96); opacity: 0; }
}/* End custom CSS */