.category-canvas-wrap{ overflow: visible !important; }

.category-bar-wrap{
  position: sticky;
  top: 72px; /* adjust to your navbar height */
  z-index: 50;
  background: #F3E3A2;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.category-bar{
  display:flex;
  gap:10px;
  padding:10px 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.category-bar a{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  color:#000;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  transition:background-color .2s ease, color .2s ease, transform .1s ease;
}

.category-bar a:hover{ background:#000; color:#fff; }
.category-bar a:active,
.category-bar a.active{ background:#D00000; color:#fff; transform:scale(.96); }

.category-canvas{
  position:relative;
  padding:18px 0;
  min-height:240px;
  z-index:0;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.category-canvas::before{ content:none; }

.canvas-skel{ padding:10px 0; }

.canvas-skel .skel-row{
  height:54px;
  border-radius:12px;
  margin:10px 12px;
  background:linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.11) 50%, rgba(0,0,0,.06) 100%);
  background-size:200% 100%;
  animation:mdnShimmer 1.25s linear infinite;
}

@keyframes mdnShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

.mdn-canvas-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(4px);
  z-index:20;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}

.mdn-canvas-overlay.is-visible{
  opacity:1;
  visibility:visible;
}

.mdn-canvas-loader-card{
  width:140px;
  height:140px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.mdn-loader-burger{
  position:relative;
  width:48px;
  height:40px;
}

.mdn-loader-burger span{
  display:block;
  position:absolute;
  left:0;
  right:0;
  height:8px;
  border-radius:999px;
  background:#D00000;
  animation:mdnBurgerBounce 1s ease-in-out infinite;
}

.mdn-loader-burger span:nth-child(1){ top:0; animation-delay:0s; }
.mdn-loader-burger span:nth-child(2){ top:16px; animation-delay:.12s; background:#F3E3A2; }
.mdn-loader-burger span:nth-child(3){ top:32px; animation-delay:.24s; }

@keyframes mdnBurgerBounce{
  0%, 100%{ transform:translateY(0); opacity:1; }
  50%{ transform:translateY(-4px); opacity:.75; }
}

.mdn-loader-dots{
  display:flex;
  gap:8px;
}

.mdn-loader-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#111;
  animation:mdnDotPulse .9s ease-in-out infinite;
}

.mdn-loader-dots span:nth-child(2){ animation-delay:.12s; }
.mdn-loader-dots span:nth-child(3){ animation-delay:.24s; }

@keyframes mdnDotPulse{
  0%, 100%{ transform:scale(.7); opacity:.4; }
  50%{ transform:scale(1); opacity:1; }
}

#catCanvas .yith-wcwl-add-to-wishlist,
#catCanvas .tinvwl_add_to_wishlist_button,
#catCanvas a.add_to_wishlist,
#catCanvas .yith-woocompare-button,
#catCanvas a.compare,
#catCanvas .compare,
#catCanvas .yith-wcqv-button,
#catCanvas a.yith-wcqv-button{
  display:none !important;
}

#catCanvas ul.products li.product .button{ margin-top:8px !important; }

#catCanvas ul.products li.product .woocommerce-loop-product__title,
#catCanvas ul.products li.product h2,
#catCanvas ul.products li.product h3{
  font-size:14px !important;
  line-height:1.2 !important;
  margin:8px 0 6px !important;
}

#catCanvas ul.products li.product .price{ margin:0 0 8px !important; }
#catCanvas ul.products li.product img{ display:block; height:auto; }

#catCanvas .your-eye-selector,
#catCanvas .eye,
#catCanvas .mdn-eye,
#catCanvas .product-eye{
  display:none !important;
}

#catCanvas .loop-short-desc{
  font-size:12px;
  line-height:1.25;
  opacity:.75;
  margin:6px 0 8px !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

#catCanvas ul.products li.product{ position:relative; }

#catCanvas .flip-card{
  position:relative;
  perspective:1000px;
  height:auto;
}

#catCanvas .flip-inner{
  position:relative;
  transition:transform .55s ease;
  transform-style:preserve-3d;
}

#catCanvas .flip-front{
  position:relative;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

#catCanvas .flip-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:14px;
  border-radius:16px;
  background:#fff;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  pointer-events:none;
}

#catCanvas .flip-card.is-flipped .flip-inner{ transform:rotateY(180deg); }
#catCanvas .flip-card.is-flipped .flip-front{ pointer-events:none; }
#catCanvas .flip-card.is-flipped .flip-back{ pointer-events:auto; }

#catCanvas .flip-title{ font-weight:800; font-size:16px; }
#catCanvas .flip-sub{ font-size:14px; opacity:.75; margin-top:-2px; }

#catCanvas .flip-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#fff;
  border:none;
  font-size:20px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  padding:0;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

#catCanvas .flip-close:hover{ background:#111; }
#catCanvas .flip-close:active{ transform:scale(.94); }

#catCanvas .flip-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}

#catCanvas .flip-actions .button{
  width:100%;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  display:inline-block;
  padding:12px 12px;
}

#catCanvas .flip-primary{ background:#D00000; color:#fff; border:0; }
#catCanvas .flip-secondary{ background:rgba(0,0,0,.06); color:#111; border:0; }

#catCanvas ul.products li.product{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  overflow:hidden;
  border:0 !important;
  outline:0 !important;
}

.mdn-add-state-card{
  margin-top:6px;
  padding:14px 12px;
  border-radius:16px;
  background:#fafafa;
  border:1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:120px;
}

.mdn-add-state-card.is-loading{
  background:linear-gradient(180deg, #fff 0%, #faf7ef 100%);
}

.mdn-add-state-card.is-success{
  background:linear-gradient(180deg, #fff 0%, #f5fff7 100%);
}

.mdn-mini-loader{
  width:46px;
  height:46px;
  border-radius:50%;
  border:4px solid rgba(208,0,0,.16);
  border-top-color:#D00000;
  animation:mdnSpin .75s linear infinite;
}

@keyframes mdnSpin{
  to{ transform:rotate(360deg); }
}

.mdn-success-check{
  width:54px;
  height:54px;
  border-radius:50%;
  background:#e9f9ee;
  color:#188a3b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:800;
}

.mdn-add-state-title{
  font-weight:800;
  font-size:15px;
}

.mdn-add-state-text{
  font-size:13px;
  line-height:1.35;
  opacity:.78;
}

@media (max-width: 768px){
  .category-bar-wrap{
    position: sticky;
    top: 72px !important; /* same: match mobile navbar height */
    left: auto;
    right: auto;
    z-index: 50;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .category-canvas{
    padding-top:72px !important;
  }

  #catCanvas ul.products{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    grid-auto-flow:row dense !important;
    justify-items:stretch !important;
    overflow:visible !important;
    padding:6px 12px 12px !important;
    margin:0 !important;
  }

  #catCanvas ul.products li.product{
    float:none !important;
    box-sizing:border-box;
    grid-column:auto !important;
    clear:none !important;
    justify-self:stretch !important;
    margin-left:0 !important;
    margin-right:0 !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    scroll-snap-align:none;
    transition:transform .28s ease;
  }

  #catCanvas ul.products li.product.first,
  #catCanvas ul.products li.product.last{
    clear:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #catCanvas ul.products li.product.is-expanded{
    grid-column:1 / -1 !important;
    z-index:5;
    margin-top:6px !important;
  }
}

#catCanvas ul.products,
#catCanvas ul.products::before,
#catCanvas ul.products::after{
  border:0 !important;
  box-shadow:none !important;
  background-image:none !important;
}

#catCanvas ul.products::before,
#catCanvas ul.products::after,
#catCanvas > ul.products::before,
#catCanvas > ul.products::after{
  content:none !important;
  display:none !important;
}

#catCanvas ul.products{ list-style:none !important; background:transparent !important; }
#catCanvas ul.products li.product{ list-style:none !important; }