/* =========================================================
   TOYOOS FRONTEND FIXES V1
   1. MKDF desktop/mobile header menu fixes
   2. WooCommerce category grid visual cleanup
   CSS ONLY
   ========================================================= */

/* ---------- HEADER: DESKTOP ---------- */
@media only screen and (min-width:1025px){
  .mkdf-page-header,
  .mkdf-page-header .mkdf-menu-area,
  .mkdf-page-header .mkdf-grid,
  .mkdf-page-header .mkdf-vertical-align-containers{
    overflow:visible !important;
  }

  .mkdf-page-header{
    position:relative !important;
    z-index:999900 !important;
  }

  .mkdf-page-header .mkdf-vertical-align-containers{
    position:relative !important;
    z-index:auto !important;
  }

  .mkdf-page-header .mkdf-position-left{
    position:relative !important;
    z-index:999990 !important;
    overflow:visible !important;
  }

  .mkdf-page-header .mkdf-position-left-inner{
    position:relative !important;
    z-index:999991 !important;
    overflow:visible !important;
  }

  .mkdf-main-menu.mkdf-drop-down.mkdf-default-nav,
  #menu-main-primary-menu,
  #menu-main-primary-menu > li{
    position:relative !important;
    z-index:999992 !important;
    overflow:visible !important;
  }

  #menu-main-primary-menu > li > .second,
  .mkdf-drop-down .second{
    z-index:999999 !important;
  }

  .mkdf-drop-down .second .inner,
  .mkdf-drop-down .second .inner > ul{
    position:relative !important;
    z-index:999999 !important;
  }

  .mkdf-drop-down .second .inner > ul{
    min-width:250px !important;
    width:max-content !important;
    max-width:320px !important;
  }

  .mkdf-drop-down .second .inner ul li a,
  .mkdf-drop-down .second .inner ul li a .item_text{
    white-space:normal !important;
    line-height:1.25 !important;
  }

  .mkdf-page-header .mkdf-position-right,
  .mkdf-page-header .mkdf-position-right-inner{
    position:relative !important;
    z-index:1 !important;
  }

  .mkdf-content,
  .mkdf-content-inner{
    position:relative !important;
    z-index:1 !important;
  }
}

/* ---------- HEADER: MOBILE ---------- */
@media only screen and (max-width:1024px){
  .mkdf-mobile-header{
    position:relative !important;
    z-index:100000 !important;
  }

  .mkdf-mobile-header .mkdf-mobile-header-inner,
  .mkdf-mobile-header .mkdf-mobile-header-holder{
    position:relative !important;
    z-index:100010 !important;
  }

  .mkdf-mobile-header .mkdf-mobile-nav{
    position:relative !important;
    z-index:100100 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    max-height:calc(100vh - 20px) !important;
    -webkit-overflow-scrolling:touch !important;
    background:#fff !important;
    width:min(92vw,420px) !important;
    min-width:320px !important;
    padding-bottom:40px !important;
  }

  .mkdf-mobile-header .mkdf-mobile-nav > div,
  .mkdf-mobile-header .mkdf-mobile-nav ul{
    position:relative !important;
    z-index:100110 !important;
    background:#fff !important;
  }

  .mkdf-mobile-header .mkdf-mobile-nav ul,
  .mkdf-mobile-header .mkdf-mobile-nav ul ul{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  .mkdf-mobile-header .mkdf-mobile-nav ul li a,
  .mkdf-mobile-header .mkdf-mobile-nav ul li a span,
  .mkdf-mobile-header .mkdf-mobile-nav .item_text{
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .mkdf-mobile-header .mkdf-position-right,
  .mkdf-mobile-header .mkdf-position-right-inner,
  .mkdf-mobile-header [class*="search"],
  .mkdf-mobile-header [class*="wishlist"],
  .mkdf-mobile-header [class*="cart"]{
    z-index:1 !important;
  }
}

/* ---------- CATEGORY GRID ---------- */
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category{
  text-align:center !important;
  margin-bottom:34px !important;
}

.woocommerce ul.products li.product-category > a,
.woocommerce-page ul.products li.product-category > a{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  text-decoration:none !important;
}

.woocommerce ul.products li.product-category img,
.woocommerce-page ul.products li.product-category img{
  width:100% !important;
  height:230px !important;
  object-fit:contain !important;
  object-position:center !important;
  box-sizing:border-box !important;
  margin:0 0 14px !important;
  padding:10px !important;
  background:#fff !important;
  border:1px solid #f0f0f0 !important;
  border-radius:10px !important;
}

/* Hide WooCommerce generic placeholder image cleanly */
.woocommerce ul.products li.product-category img[src*="placeholder"],
.woocommerce-page ul.products li.product-category img[src*="placeholder"]{
  visibility:hidden !important;
}

/* Keep the missing-image card area neutral and consistent */
.woocommerce ul.products li.product-category:has(img[src*="placeholder"]) > a::before,
.woocommerce-page ul.products li.product-category:has(img[src*="placeholder"]) > a::before{
  content:"Image coming soon";
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:230px;
  box-sizing:border-box;
  margin:0 0 -244px;
  padding:10px;
  color:#999;
  font-size:14px;
  font-weight:600;
  background:#fafafa;
  border:1px solid #f0f0f0;
  border-radius:10px;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce-page ul.products li.product-category .woocommerce-loop-category__title{
  font-size:20px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  margin:0 !important;
  padding:0 6px !important;
  min-height:50px !important;
  text-align:center !important;
}

.woocommerce ul.products li.product-category .count,
.woocommerce-page ul.products li.product-category .count,
.woocommerce-loop-category__title .count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#f5f5f5 !important;
  color:#666 !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:600 !important;
  padding:5px 7px !important;
  margin-left:5px !important;
  border-radius:999px !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
}

@media only screen and (min-width:769px) and (max-width:1024px){
  .woocommerce ul.products li.product-category img,
  .woocommerce-page ul.products li.product-category img{
    height:200px !important;
  }

  .woocommerce ul.products li.product-category:has(img[src*="placeholder"]) > a::before,
  .woocommerce-page ul.products li.product-category:has(img[src*="placeholder"]) > a::before{
    height:200px;
    margin-bottom:-214px;
  }

  .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
  .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title{
    font-size:18px !important;
    min-height:46px !important;
  }
}

@media only screen and (max-width:768px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px 12px !important;
  }

  .woocommerce ul.products li.product-category,
  .woocommerce-page ul.products li.product-category{
    width:100% !important;
    float:none !important;
    clear:none !important;
    margin:0 !important;
  }

  .woocommerce ul.products li.product-category img,
  .woocommerce-page ul.products li.product-category img{
    height:150px !important;
    margin-bottom:10px !important;
    padding:7px !important;
    border-radius:9px !important;
  }

  .woocommerce ul.products li.product-category:has(img[src*="placeholder"]) > a::before,
  .woocommerce-page ul.products li.product-category:has(img[src*="placeholder"]) > a::before{
    height:150px;
    margin-bottom:-160px;
    font-size:12px;
  }

  .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
  .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title{
    font-size:15px !important;
    line-height:1.3 !important;
    min-height:40px !important;
    padding:0 2px !important;
  }

  .woocommerce ul.products li.product-category .count,
  .woocommerce-page ul.products li.product-category .count,
  .woocommerce-loop-category__title .count{
    font-size:10px !important;
    padding:4px 6px !important;
    margin-left:3px !important;
  }
}