/* tin-shop :: categorie a PILLOLE in colonna nella sidebar (sinistra) */

.tin-shop-on .widget_product_categories .product-categories{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* NB: l'allineamento "All products" col top dei prodotti è fatto via JS inline in shop.js
   (transform translateY 14px): il CSS qui veniva sovrascritto da Enfold. */
.tin-shop-on .widget_product_categories li.cat-item{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#ece3d2;
  border-radius:999px;
  transition:background .15s, color .15s;
}
/* nasconde la freccetta del widget (Enfold usa #top → serve #top per batterlo) */
body.tin-shop-on #top .widget_product_categories li,
body.tin-shop-on #top .widget_product_categories li.cat-item{ list-style:none !important; }
body.tin-shop-on #top .widget_product_categories li::before,
body.tin-shop-on #top .widget_product_categories li::after,
body.tin-shop-on #top .widget_product_categories li > a::before{ content:none !important; display:none !important; background:none !important; }
/* la freccetta Enfold è un background-image (bullet_grey.png) sul link → lo rimuovo (specificità alta) */
html body.tin-shop-on #top .widget_product_categories ul.product-categories li.cat-item > a{
  background:none !important;
  background-image:none !important;
  padding-left:7px !important;
}
.tin-shop-on .widget_product_categories li.cat-item > a{
  flex:1 1 auto;
  min-width:0;
  padding:7px 4px 7px 7px;
  color:#475141;
  text-decoration:none;
  font-size:12px;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tin-shop-on .widget_product_categories li.cat-item:hover{ background:#475141; }
.tin-shop-on .widget_product_categories li.cat-item:hover > a{ color:#f3ead9; }
.tin-shop-on .widget_product_categories li.cat-item .count{
  flex:0 0 auto;
  background:#d4a574;
  color:#3a3a2e;
  border-radius:999px;
  min-width:17px;
  text-align:center;
  padding:1px 6px;
  margin-right:6px;
  font-size:10px;
  font-weight:600;
  line-height:1.4;
}
.tin-shop-on .widget_product_categories li.cat-item:hover .count{ background:#3a3a2e; color:#f3ead9; }

/* "All products" giallo brand */
.tin-shop-on .widget_product_categories li.tin-allcats{ background:#facc27; }
.tin-shop-on .widget_product_categories li.tin-allcats > a{ color:#3a3a2e; font-weight:600; }
.tin-shop-on .widget_product_categories li.tin-allcats:hover{ background:#e3b91f; }
.tin-shop-on .widget_product_categories li.tin-allcats:hover > a{ color:#3a3a2e; }

/* categoria corrente attiva (verde pieno) */
.tin-shop-on .widget_product_categories li.current-cat{ background:#475141; }
.tin-shop-on .widget_product_categories li.current-cat > a{ color:#f3ead9; }
.tin-shop-on .widget_product_categories li.current-cat .count{ background:#3a3a2e; color:#f3ead9; }

/* ===== Icona categoria dentro la pillola (desktop) — iniettata da shop.js ===== */
.tin-shop-on .widget_product_categories li.cat-item .tin-cat-ic{
  flex:0 0 auto;
  width:24px; height:24px;
  margin-left:4px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.tin-shop-on .widget_product_categories li.cat-item .tin-cat-ic svg{ width:13px; height:13px; }
/* All products (giallo): icona scura in cerchio chiaro */
.tin-shop-on .widget_product_categories li.tin-allcats .tin-cat-ic{ background:rgba(255,255,255,.55); }
.tin-shop-on .widget_product_categories li.tin-allcats .tin-cat-ic svg{ stroke:#5a4d10 !important; color:#5a4d10 !important; }
/* categoria corrente (verde): icona crema in cerchio translucido */
.tin-shop-on .widget_product_categories li.current-cat .tin-cat-ic{ background:rgba(255,255,255,.16); }
.tin-shop-on .widget_product_categories li.current-cat .tin-cat-ic svg{ stroke:#f3ead9 !important; color:#f3ead9 !important; }
/* hover (pillola → verde, escluso All products): icona crema */
.tin-shop-on .widget_product_categories li.cat-item:not(.tin-allcats):hover .tin-cat-ic{ background:rgba(255,255,255,.16); }
.tin-shop-on .widget_product_categories li.cat-item:not(.tin-allcats):hover .tin-cat-ic svg{ stroke:#f3ead9 !important; color:#f3ead9 !important; }

/* ===== Casella "Cerca prodotti": barra arrotondata con lente in un pallino dentro =====
   (base + pallino impostati anche via JS inline perché Enfold sovrascrive; qui stati + fallback) */
body.tin-shop-on #top .widget_product_search form.woocommerce-product-search{
  position:relative !important;
  margin-top:8px;
}
body.tin-shop-on #top .widget_product_search .search-field{
  width:100% !important;
  box-sizing:border-box !important;
  background:#fff !important;
  border:1.5px solid #e3dccb !important;
  border-radius:999px !important;
  padding:11px 38px 11px 18px !important;
  margin:0 !important;
  font-size:14px !important;
  color:#475141 !important;
  height:auto !important;
  box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s !important;
}
body.tin-shop-on #top .widget_product_search .search-field::placeholder{ color:#9a958a !important; }
body.tin-shop-on #top .widget_product_search .search-field:focus{
  outline:none !important;
  border-color:#d4a574 !important;
  box-shadow:0 0 0 3px rgba(212,165,116,.20) !important;
}
body.tin-shop-on #top .widget_product_search button[type=submit]{
  position:absolute !important;
  right:5px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:38px !important;
  height:38px !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#475141 !important;
  color:#f3ead9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  font-size:0 !important;
  cursor:pointer;
  transition:background .15s !important;
}
body.tin-shop-on #top .widget_product_search button[type=submit]:hover{ background:#5a6852 !important; }

/* sottocategorie annidate */
.tin-shop-on .widget_product_categories li.cat-item .children{
  list-style:none;
  margin:6px 0 0;
  padding:0 0 0 10px;
  flex:1 1 100%;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ===== Barra categorie a ICONE (solo mobile, dove Enfold nasconde la sidebar) =====
   Visibilità gestita da shop.js via classe .is-on (legata alla sidebar nascosta). */
.tin-shop-on .tinm-catbar{ display:none; }
.tin-shop-on .tinm-catbar.is-on{
  display:flex;
  justify-content:space-between;
  gap:4px;
  overflow-x:auto;
  /* padding-top ampio: overflow-x:auto taglia anche in verticale → serve spazio per i badge (top:-4px) */
  padding:8px 10px 2px;
  margin:0 0 8px; /* il margine-top (negativo) è impostato dinamicamente da shop.js: gap uniforme su tutte le pagine */
  width:100%;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tin-shop-on .tinm-catbar.is-on::-webkit-scrollbar{ display:none; }
/* full-width: ogni voce divide equamente la larghezza (min-width = scroll se troppe) */
.tin-shop-on .tinm-cat{
  flex:1 1 0;
  min-width:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-decoration:none;
}
/* Enfold stila i link dentro #top → neutralizzo sfondo/hover sul link icona */
body.tin-shop-on #top .tinm-cat,
body.tin-shop-on #top .tinm-cat:hover{ background:none !important; box-shadow:none !important; }
.tin-shop-on .tinm-circ{
  position:relative;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#ece3d2;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s;
}
.tin-shop-on .tinm-circ svg{ width:16px; height:16px; }
.tin-shop-on .tinm-cat.is-active .tinm-circ{ background:#475141; }
.tin-shop-on .tinm-n{
  position:absolute;
  top:-4px;
  right:-4px;
  background:#d4a574;
  color:#3a3a2e;
  border-radius:999px;
  min-width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  line-height:1;
  padding:0 3px;
}
.tin-shop-on .tinm-lab{
  font-size:9px;
  line-height:1.1;
  text-align:center;
  color:#475141;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.tin-shop-on .tinm-cat.is-active .tinm-lab{ font-weight:700; }