/* ==========================================================================
   HOCO REDESIGN — 30 SHOP CHROME
   Scope: Shop + product category archive PAGE CHROME only.
     - Page-title banner (.page-title / .title-shop / .title-design-*)
     - Results toolbar (.shop-loop-head, breadcrumb, result count,
       per-page switcher, grid-view switcher, sort .orderby)
     - Pagination (.woocommerce-pagination / .wd-pagination)
   Does NOT touch product cards (.product-grid-item = agent 35) or the
   sidebar widgets (agent 31). Tokens from 00-core.css. RTL + responsive.
   ========================================================================== */

/* ==========================================================================
   1) PAGE-TITLE BANNER — replace heavy blue gradient with a clean, light
   brand band (dark ink title + pill category nav, /test look).
   ========================================================================== */
.page-title.title-shop,
.page-title.title-size-default.title-shop{
  background:linear-gradient(120deg,#faf7fb 0%,#f4ecf6 55%,#efe6f3 100%) !important;
  background-image:linear-gradient(120deg,#faf7fb 0%,#f4ecf6 55%,#efe6f3 100%) !important;
  border-bottom:1px solid var(--hoco-line);
  margin-top:0 !important;
  margin-bottom:26px !important;
  padding-block:26px 20px !important;
}
/* neutralise any theme overlay pseudo-element on the banner */
.page-title.title-shop:before,
.page-title.title-shop:after{background:none !important;background-image:none !important}

.page-title.title-shop>.container{
  position:relative;
  gap:8px 20px;
  row-gap:12px;
}

/* Title text — force dark ink (banner is now light, was color-scheme-light) */
.page-title.title-shop .entry-title.title,
.page-title.title-shop .title{
  color:var(--hoco-ink) !important;
  font-size:28px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
  margin:0 !important;
}

/* "Categories" toggle button (mobile category accordion trigger) */
.page-title.title-shop .wd-btn-show-cat>a{
  color:var(--hoco-brand) !important;
  font-weight:700;
}

/* ---- Category nav as pill chips (like /test .catnav) ---- */
.page-title.title-shop .wd-nav-product-cat{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 !important;
  border:0 !important;
  padding:0 !important;
}
.page-title.title-shop .wd-nav-product-cat>li{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.page-title.title-shop .wd-nav-product-cat>li:before,
.page-title.title-shop .wd-nav-product-cat>li:after{display:none !important}
.page-title.title-shop .wd-nav-product-cat .category-nav-link,
.page-title.title-shop .wd-nav-product-cat>li>a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  padding:7px 15px !important;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--hoco-line);
  color:#4a444e !important;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  transition:.2s;
}
.page-title.title-shop .wd-nav-product-cat .category-nav-link:hover,
.page-title.title-shop .wd-nav-product-cat>li>a:hover,
.page-title.title-shop .wd-nav-product-cat>li.active>a,
.page-title.title-shop .wd-nav-product-cat>li.current-cat>a{
  background:var(--hoco-brand);
  border-color:var(--hoco-brand);
  color:#fff !important;
}
.page-title.title-shop .wd-nav-product-cat .category-nav-link:hover .nav-link-text,
.page-title.title-shop .wd-nav-product-cat .category-nav-link:hover .nav-link-count,
.page-title.title-shop .wd-nav-product-cat>li>a:hover *{color:#fff !important}
/* remove the underline "style" indicator, we use pills instead */
.page-title.title-shop .wd-nav-product-cat.wd-style-underline .category-nav-link:before,
.page-title.title-shop .wd-nav-product-cat .category-nav-link:after{display:none !important}
.page-title.title-shop .wd-nav-product-cat .nav-link-count{
  color:var(--hoco-muted);
  font-weight:500;
  font-size:12px;
}

/* ==========================================================================
   2) RESULTS TOOLBAR (.shop-loop-head) — clean white carded bar
   ========================================================================== */
.shop-loop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 16px;
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);
  padding:12px 16px;
  margin-bottom:20px;
}
.shop-loop-head .wd-shop-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
  margin:0;
}

/* breadcrumb */
.shop-loop-head .wd-breadcrumbs .woocommerce-breadcrumb,
.shop-loop-head .woocommerce-breadcrumb{
  margin:0 !important;
  font-size:13px;
  color:var(--hoco-muted);
}
.shop-loop-head .woocommerce-breadcrumb a{color:var(--hoco-muted)}
.shop-loop-head .woocommerce-breadcrumb a:hover{color:var(--hoco-brand)}
.shop-loop-head .woocommerce-breadcrumb .breadcrumb-last{color:var(--hoco-ink);font-weight:700}

/* result count */
.shop-loop-head .woocommerce-result-count{
  margin:0 !important;
  font-size:13.5px;
  color:var(--hoco-muted);
}

/* "Show sidebar" button */
.shop-loop-head .wd-show-sidebar-btn>a{
  color:var(--hoco-ink) !important;
  font-weight:600;
  font-size:13.5px;
}
.shop-loop-head .wd-show-sidebar-btn>a:hover{color:var(--hoco-brand) !important}

/* ---- per-page (Show 9 / 12 / 18 / 24) switcher ---- */
.shop-loop-head .wd-products-per-page{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:13.5px;
}
.shop-loop-head .wd-products-per-page .per-page-title{
  color:var(--hoco-muted);
  margin-inline-end:6px;
  font-weight:600;
}
.shop-loop-head .wd-products-per-page .per-page-variation>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  padding:3px 6px;
  border-radius:8px;
  color:var(--hoco-muted);
  font-weight:700;
  transition:.2s;
}
.shop-loop-head .wd-products-per-page .per-page-variation:hover>span{
  color:var(--hoco-brand);
  background:#f4ecf6;
}
.shop-loop-head .wd-products-per-page .per-page-variation.current-variation>span{
  color:#fff;
  background:var(--hoco-brand);
}
.shop-loop-head .wd-products-per-page .per-page-border{
  width:1px;
  height:14px;
  background:var(--hoco-line);
  margin-inline:2px;
}
.shop-loop-head .wd-products-per-page .per-page-border:last-child{display:none}

/* ---- grid-view (columns) switcher ---- */
.shop-loop-head .wd-products-shop-view{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.shop-loop-head .wd-products-shop-view .shop-view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:9px;
  border:1px solid var(--hoco-line);
  background:#fff;
  transition:.2s;
}
.shop-loop-head .wd-products-shop-view .shop-view svg{
  width:16px;height:16px;
  fill:var(--hoco-muted);
  transition:.2s;
}
.shop-loop-head .wd-products-shop-view .shop-view:hover{border-color:var(--hoco-brand)}
.shop-loop-head .wd-products-shop-view .shop-view:hover svg{fill:var(--hoco-brand)}
.shop-loop-head .wd-products-shop-view .shop-view.current-variation{
  background:var(--hoco-brand);
  border-color:var(--hoco-brand);
}
.shop-loop-head .wd-products-shop-view .shop-view.current-variation svg{fill:#fff}

/* ---- sort dropdown (.orderby) ---- */
.shop-loop-head .woocommerce-ordering{margin:0 !important}
.shop-loop-head .woocommerce-ordering select.orderby,
.woocommerce-ordering select.orderby{
  border:1px solid var(--hoco-line) !important;
  border-radius:10px !important;
  background:#fff;
  color:var(--hoco-ink);
  font-family:inherit;
  font-weight:600;
  font-size:13.5px;
  padding:9px 34px 9px 14px;
  cursor:pointer;
  transition:.2s;
  min-height:38px;
  box-shadow:none;
}
.shop-loop-head .woocommerce-ordering select.orderby:hover{border-color:#d9cadf !important}
.shop-loop-head .woocommerce-ordering select.orderby:focus{
  border-color:var(--hoco-brand) !important;
  outline:0;
  box-shadow:0 0 0 3px rgba(84,4,87,.12);
}
/* woodmart underline-style ordering: hide the underline artifact */
.shop-loop-head .woocommerce-ordering.wd-style-underline:after{display:none !important}

/* ==========================================================================
   3) PAGINATION — brand-purple pill for the active page
   ========================================================================== */
.woocommerce-pagination,
nav.woocommerce-pagination.wd-pagination{
  margin-top:34px;
  text-align:center;
}
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  border:0 !important;
  margin:0;
  padding:0;
}
.woocommerce-pagination ul li{
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible;
}
.woocommerce-pagination ul li .page-numbers{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 8px;
  border-radius:12px !important;
  border:1px solid var(--hoco-line) !important;
  background:#fff !important;
  color:var(--hoco-ink) !important;
  font-weight:700;
  font-size:15px;
  line-height:1;
  transition:.2s;
}
.woocommerce-pagination ul li a.page-numbers:hover{
  border-color:var(--hoco-brand) !important;
  color:var(--hoco-brand) !important;
  background:#f7f0f8 !important;
}
.woocommerce-pagination ul li .page-numbers.current{
  background:var(--hoco-brand) !important;
  border-color:var(--hoco-brand) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(84,4,87,.28);
}
.woocommerce-pagination ul li .page-numbers.dots{
  border:0 !important;
  background:transparent !important;
  min-width:auto;
  color:var(--hoco-muted) !important;
  box-shadow:none;
}
/* next / prev arrows — flip glyph for RTL handled by theme's own arrows */
.woocommerce-pagination ul li .page-numbers.next,
.woocommerce-pagination ul li .page-numbers.prev{
  font-size:18px;
  font-weight:700;
}

/* ==========================================================================
   4) RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .page-title.title-shop .entry-title.title,
  .page-title.title-shop .title{font-size:24px !important}
}
@media (max-width:768px){
  .page-title.title-shop{padding-block:20px 16px !important;margin-bottom:20px !important}
  .page-title.title-shop .entry-title.title,
  .page-title.title-shop .title{font-size:22px !important}
  /* let the category pill row scroll horizontally on phones */
  .page-title.title-shop .wd-nav-product-cat{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px !important;
  }
  .page-title.title-shop .wd-nav-product-cat::-webkit-scrollbar{display:none}
  .shop-loop-head{padding:10px 12px;gap:10px 12px}
  .shop-loop-head .wd-shop-tools{gap:8px 12px}
}
@media (max-width:480px){
  .page-title.title-shop .entry-title.title,
  .page-title.title-shop .title{font-size:20px !important}
  .woocommerce-pagination ul li .page-numbers{min-width:38px;height:38px;font-size:14px}
  .shop-loop-head .woocommerce-ordering{flex:1 1 100%}
  .shop-loop-head .woocommerce-ordering select.orderby{width:100%}
}