/* Yogya Fresh — Phase 2B Category Pages */
.yf-category-page{background:#fff;color:#17324d;}
.yf-category-container{width:min(1500px,calc(100% - 48px));margin:0 auto;}
/* Phase 2B.2 — Full-width category hero aligned with Home identity */
.yf-category-hero{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid #dfeaf3;
  background:
    linear-gradient(90deg, rgba(246,251,255,.98) 0%, rgba(246,251,255,.92) 34%, rgba(246,251,255,.46) 58%, rgba(246,251,255,.08) 100%),
    var(--yf-category-hero-image),
    linear-gradient(90deg,#f3f9ff 0%,#f7fbf4 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.yf-category-hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.04));
}
.yf-category-hero__inner{
  position:relative;
  z-index:2;
  display:block;
}
.yf-category-hero__copy{
  width:min(720px,62%);
  padding:54px 0;
}
.yf-category-back{
  display:inline-flex;
  margin-bottom:24px;
  color:#0b63b6;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.yf-category-back:hover{color:#55b62d;}
.yf-category-kicker{
  display:block;
  margin-bottom:10px;
  color:#2e8c20;
  font-size:13px;
  font-weight:800;
}
.yf-category-hero h1{
  margin:0 0 16px;
  color:#0c447a;
  font-size:48px;
  line-height:1.04;
  font-weight:800;
  letter-spacing:-.03em;
}
.yf-category-hero p{
  max-width:660px;
  margin:0;
  color:#52697d;
  font-size:15px;
  line-height:1.75;
}
.yf-category-promise{
  display:inline-flex;
  margin-top:22px;
  padding:10px 14px;
  border:1px solid rgba(7,136,216,.20);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#0788d8;
  font-size:11px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(17,66,104,.05);
}












.yf-category-main{padding:30px 0 56px;}
.yf-category-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;}
.yf-category-toolbar__eyebrow{display:block;margin-bottom:3px;color:#2e8c20;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;}
.yf-category-toolbar strong{color:#52697d;font-size:13px;}
.yf-category-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start;}
.yf-category-sidebar{position:sticky;top:16px;display:grid;gap:16px;}
.yf-category-side-card,.yf-category-filter{border:1px solid #dfeaf3;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(17,66,104,.05);padding:18px;}
.yf-category-side-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #e6eef4;}
.yf-category-side-head strong{color:#0c447a;font-size:14px;}
.yf-category-side-head a{color:#0b63b6;font-size:10px;font-weight:800;text-decoration:none;}
.yf-category-links{display:grid;gap:3px;}
.yf-category-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:9px;color:#52697d;font-size:11px;font-weight:700;text-decoration:none;}
.yf-category-links a:hover{background:#f5f9fc;color:#0c447a;}
.yf-category-links a.is-active{background:#eff8eb;color:#2e8c20;}
.yf-category-links small{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#eef4f7;color:#70869a;font-size:9px;font-weight:900;}
.yf-category-links a.is-active small{background:#fff;color:#2e8c20;}
.yf-category-filter .yf-filter-group select{width:100%;height:42px;border:1px solid #d5e3ed;border-radius:10px;background:#fff;color:#17324d;padding:0 12px;box-shadow:none;}
.yf-category-filter .yf-filter-checks{display:grid;gap:10px;}
.yf-category-filter .yf-filter-checks label{display:flex;align-items:center;gap:8px;margin:0;color:#52697d;font-size:12px;font-weight:700;}
.yf-category-filter .yf-filter-checks input{width:16px;height:16px;margin:0;accent-color:#55b62d;}
.yf-category-results{min-width:0;}
.yf-category-empty{display:flex;min-height:360px;padding:44px 28px;border:1px dashed #cadce8;border-radius:18px;background:#fbfdff;align-items:center;justify-content:center;flex-direction:column;text-align:center;}
.yf-category-empty>span{display:inline-flex;margin-bottom:10px;padding:6px 9px;border-radius:999px;background:#f1faec;color:#2e8c20;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.yf-category-empty h2{margin:0 0 9px;color:#0c447a;font-size:27px;line-height:1.2;}
.yf-category-empty p{max-width:520px;margin:0 0 22px;color:#70869a;font-size:13px;line-height:1.6;}
body.tax-product_cat .storefront-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-products-header{display:none!important;}
body.tax-product_cat .content-area,
body.tax-product_cat .site-main{width:100%!important;float:none!important;margin:0!important;padding:0!important;}
@media(max-width:1280px){
  .yf-category-container{width:min(1200px,calc(100% - 36px));}
  .yf-category-layout{grid-template-columns:240px minmax(0,1fr);}
}
@media(max-width:900px){
  
  
  .yf-category-layout{grid-template-columns:1fr;}
  .yf-category-sidebar{position:static;grid-template-columns:1fr 1fr;}
}
@media(max-width:680px){
  .yf-category-container{width:calc(100% - 24px);}
  
  
  
  
  
  .yf-category-toolbar{align-items:flex-start;flex-direction:column;}
  .yf-category-toolbar .yf-shop-sort{width:100%;}
  .yf-category-sidebar{grid-template-columns:1fr;}
  .yf-category-empty{min-height:300px;padding:34px 18px;}
  .yf-category-empty h2{font-size:22px;}
}

@media(max-width:900px){
  .yf-category-hero{min-height:365px;background-position:64% center;}
  .yf-category-hero__copy{width:min(680px,74%);padding:48px 0;}
}
@media(max-width:680px){
  .yf-category-hero{min-height:350px;background-position:66% center;}
  .yf-category-hero__copy{width:100%;padding:40px 0;}
  .yf-category-hero h1{font-size:34px;}
  .yf-category-hero p{max-width:94%;}
}

/* v1.0.6 — Fresh Vegetables hero artwork */
.yf-category-hero--artwork{
  width:100%;
  margin:0;
  padding:0;
  min-height:0;
  background:#fff;
  overflow:hidden;
}
.yf-category-hero__artwork{
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}


.yf-category-hero--has-copy{
  position:relative;
}
.yf-category-hero__copy-wrap{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
}
.yf-category-hero__copy-card{
  width:min(520px,42vw);
  padding:28px 32px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 44px rgba(12,68,122,.12);
}
.yf-category-hero--artwork .yf-category-hero__copy-card h1{
  margin:0 0 14px;
  color:#0c447a;
  font-size:52px;
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.03em;
}
.yf-category-hero--artwork .yf-category-hero__copy-card p{
  margin:0;
  color:#52697d;
  font-size:15px;
  line-height:1.75;
}
@media(max-width:900px){
  .yf-category-hero__copy-card{width:min(620px,68vw);padding:24px 26px;}
  .yf-category-hero--artwork .yf-category-hero__copy-card h1{font-size:42px;}
}
@media(max-width:680px){
  .yf-category-hero__copy-wrap{align-items:flex-end;}
  .yf-category-hero__copy-card{width:100%;margin:0 0 16px;padding:20px 18px;border-radius:18px;}
  .yf-category-hero--artwork .yf-category-hero__copy-card h1{font-size:32px;}
  .yf-category-hero--artwork .yf-category-hero__copy-card p{font-size:14px;line-height:1.65;}
}

/* =========================================================
 * YOGYA FRESH — MOBILE CATEGORY UX FINAL 2.0
 * Single consolidated mobile rule set. Desktop is untouched.
 * ========================================================= */
@media screen and (max-width: 767px) {

  /* A. All product-category heroes behave consistently on mobile.
     Copy is placed in normal document flow BELOW the artwork instead of
     absolutely floating over the image. This prevents the mobile search row
     from visually colliding with hero content on categories that have copy. */
  .yf-category-page .yf-category-hero--has-copy {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .yf-category-page .yf-category-hero--has-copy .yf-category-hero__artwork {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  .yf-category-page .yf-category-hero--has-copy .yf-category-hero__copy-wrap {
    order: 2 !important;
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    background: #fff !important;
  }

  .yf-category-page .yf-category-hero--has-copy .yf-category-hero__copy-wrap .yf-category-container {
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
  }

  .yf-category-page .yf-category-hero--has-copy .yf-category-hero__copy-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 2px 12px !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .yf-category-page .yf-category-hero--artwork .yf-category-hero__copy-card .yf-category-back {
    display: inline-block !important;
    margin: 0 0 4px !important;
    font-size: 9px !important;
  }

  .yf-category-page .yf-category-hero--artwork .yf-category-hero__copy-card .yf-category-kicker {
    margin: 0 0 2px !important;
    font-size: 9px !important;
  }

  .yf-category-page .yf-category-hero--artwork .yf-category-hero__copy-card h1 {
    margin: 0 0 4px !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
  }

  .yf-category-page .yf-category-hero--artwork .yf-category-hero__copy-card p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.42 !important;
  }

  .yf-category-page .yf-category-hero--artwork .yf-category-hero__copy-card .yf-category-promise {
    margin-top: 6px !important;
    padding: 5px 8px !important;
    font-size: 8px !important;
  }

  /* B. Duplicate category/filter sidebar is desktop-only. */
  .yf-category-page .yf-category-sidebar,
  .yf-category-page .yf-category-side-card,
  .yf-category-page .yf-category-filter {
    display: none !important;
  }

  .yf-category-page .yf-category-layout {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin: 0 !important;
  }

  .yf-category-page .yf-category-results {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* C. Sorting is removed completely on mobile. */
  .yf-category-page .yf-category-toolbar__sort,
  .yf-category-page .yf-category-toolbar > form.yf-shop-sort {
    display: none !important;
  }

  /* D. "Pilihan ..." and "X produk tersedia" share one compact row. */
  .yf-category-page .yf-category-main {
    padding-top: 8px !important;
    padding-bottom: 30px !important;
  }

  .yf-category-page .yf-category-toolbar {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }

  .yf-category-page .yf-category-toolbar__summary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .yf-category-page .yf-category-toolbar__eyebrow {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #2e8c20 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .yf-category-page .yf-category-toolbar__summary > strong {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #52697d !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}