.category-canvas-wrap{ overflow: visible !important; }

.category-bar-wrap{
  top: 0;
  z-index: 9999;
  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-loading{
  font-size:14px;
  opacity:.8;
  padding:12px 0;
}

.canvas-skel{ padding:10px 0; }

.canvas-skel .skel-row{
  height:54px;
  border-radius:12px;
  margin:10px 0;
  background:rgba(0,0,0,.08);
}

#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;
  transition:transform .25s ease, opacity .25s ease;
}

#catCanvas .flip-inner{
  position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}

#catCanvas .flip-front{
  position:relative;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  cursor:pointer;
  touch-action:manipulation;
}

#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;
}

@media (max-width: 768px){
  .category-bar-wrap{
    top:0 !important;
    left:0;
    right:0;
    z-index:99999;
    width:100vw !important;
    max-width:100vw !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;
    scroll-margin-top:88px;
  }

  #catCanvas ul.products li.product.is-expanded .flip-card{
    opacity:1;
  }

  #catCanvas.has-active-card ul.products li.product{
    transition:opacity .24s ease, transform .24s ease, filter .24s ease, box-shadow .24s ease;
  }

  #catCanvas.has-active-card ul.products li.product.is-deemphasized{
    opacity:.28;
    transform:scale(.96);
    filter:saturate(.55);
    pointer-events:none;
  }

  #catCanvas.has-active-card ul.products li.product.is-focus-card{
    opacity:1;
    transform:translateY(-2px);
    z-index:8;
  }

  #catCanvas ul.products li.product.is-focus-card .flip-card{
    min-height:var(--mdn-mobile-flip-height, auto);
  }

  #catCanvas ul.products li.product.is-focus-card .flip-front,
  #catCanvas ul.products li.product.is-focus-card .flip-back{
    border-radius:18px;
  }

  #catCanvas ul.products li.product.is-focus-card .flip-back{
    justify-content:flex-start;
    padding:56px 14px 16px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    box-shadow:0 18px 34px rgba(0,0,0,.18);
  }

  #catCanvas ul.products li.product.is-focus-card .flip-step{
    min-height:100%;
  }

  #catCanvas ul.products li.product.is-focus-card .flip-actions{
    margin-top:auto;
    padding-top:12px;
    position:sticky;
    bottom:0;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 24px, #fff 100%);
  }

  #catCanvas ul.products li.product.is-focus-card .flip-close{
    position:sticky;
    top:0;
    margin-left:auto;
    right:auto;
  }
}

#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; }


/* Full-screen initial loader */
.mdn-menu-screen{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

.mdn-menu-screen.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mdn-menu-screen.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mdn-menu-screen__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.mdn-menu-screen__logo-wrap{
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdn-menu-screen__logo{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mdn-menu-screen__spinner{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: #D00000;
  animation: mdnSpin .8s linear infinite;
}

.mdn-menu-screen__text{
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

/* Product-grid loader instead of plain text */
.mdn-products-loader{
  padding: 12px;
}

.mdn-products-loader__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mdn-products-loader__card{
  min-height: 250px;
  border-radius: 18px;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.05) 25%,
      rgba(0,0,0,.10) 37%,
      rgba(0,0,0,.05) 63%
    );
  background-size: 400% 100%;
  animation: mdnShimmer 1.2s ease-in-out infinite;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

@media (max-width: 768px){
  .mdn-products-loader__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mdn-products-loader__card{
    min-height: 220px;
  }
}

@keyframes mdnShimmer{
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}


/* Full-canvas loading overlay */
#catCanvas.is-loading{
  position: relative;
  pointer-events: none;
}

#catCanvas .mdn-canvas-loader{
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 22px;
}

#catCanvas.is-loading .mdn-canvas-loader{
  display: flex;
}

#catCanvas .mdn-canvas-loader__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#catCanvas .mdn-canvas-loader__spinner{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid rgba(0,0,0,.10);
  border-top-color: #D00000;
  animation: mdnSpin .75s linear infinite;
}

#catCanvas .mdn-canvas-loader__dots{
  display: flex;
  gap: 8px;
}

#catCanvas .mdn-canvas-loader__dots span{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #D00000;
  animation: mdnPulse 1s infinite ease-in-out;
}

#catCanvas .mdn-canvas-loader__dots span:nth-child(2){
  animation-delay: .15s;
}

#catCanvas .mdn-canvas-loader__dots span:nth-child(3){
  animation-delay: .3s;
}

@keyframes mdnSpin{
  to { transform: rotate(360deg); }
}

@keyframes mdnPulse{
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Add-to-cart visual state */
#catCanvas .flip-step-done.is-pending .flip-title{
  color: #111;
}

#catCanvas .flip-step-done.is-success .flip-title{
  color: #0f7a2f;
}

#catCanvas .flip-step-done.is-error .flip-title{
  color: #b42318;
}

#catCanvas .flip-done-loader{
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#catCanvas .flip-step-done.is-pending .flip-done-loader{
  display: flex;
}

#catCanvas .flip-done-loader span{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #D00000;
  animation: mdnPulse 1s infinite ease-in-out;
}

#catCanvas .flip-done-loader span:nth-child(2){
  animation-delay: .15s;
}

#catCanvas .flip-done-loader span:nth-child(3){
  animation-delay: .3s;
}