/* TG-HOME-CATS-1109: Shop by Category cleanup — shops 50/72 index only.
   Hide duplicate tg-v3-cats; upgrade #cats / .tg-home-cats grid.
   Rollback: remove this file + head.tpl block; see ROLLBACK-LIVE.md */

/* 1) Hide the JS-injected duplicate (keep hero .tg-v3-banner) */
html body#index section.tg-v3-cats{
  display:none!important;
  height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  border:0!important;visibility:hidden!important;pointer-events:none!important;
}

/* 2) Shared upgraded grid — beat inline .tg5 .tiles 3-col / span rules */
html body#index #cats .tiles,
html body#index section#cats .tiles,
html body#index .tg-home-cats .tiles{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
html body#index #cats .tiles > .tile,
html body#index section#cats .tiles > .tile,
html body#index .tg-home-cats .tiles > .tile{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  text-decoration:none!important;
  color:inherit!important;
  background:#fff!important;
  border:1px solid #e8e8ea!important;
  border-radius:16px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
/* Image area — square */
html body#index #cats .tiles > .tile .ti-i,
html body#index .tg-home-cats .tiles > .tile .ti-i{
  display:block!important;
  aspect-ratio:1/1!important;
  width:100%!important;
  overflow:hidden!important;
  background:var(--bg,#f3f3f4)!important;
  margin:0!important;
  padding:0!important;
}
html body#index #cats .tiles > .tile .ti-i img,
html body#index .tg-home-cats .tiles > .tile .ti-i img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  aspect-ratio:auto!important;
}
/* Labels fully visible — no truncation */
html body#index #cats .tiles > .tile .tt,
html body#index .tg-home-cats .tiles > .tile .tt{
  display:block!important;
  padding:8px 8px 10px!important;
  text-align:center!important;
  background:#fff!important;
  border-top:1px solid #f0f0f0!important;
  min-width:0!important;
}
html body#index #cats .tiles > .tile .tt b,
html body#index .tg-home-cats .tiles > .tile .tt b{
  display:block!important;
  font:600 13px/1.25 Poppins,Inter,system-ui,sans-serif!important;
  color:#111!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:break-word!important;
  max-height:none!important;
}
html body#index #cats .tiles > .tile .tt .ta,
html body#index .tg-home-cats .tiles > .tile .tt .ta{
  display:none!important;
}
/* Red underline accent like mockup */
html body#index #cats .tiles > .tile .tt b::after,
html body#index .tg-home-cats .tiles > .tile .tt b::after{
  content:"";
  display:block;
  width:28px;height:3px;border-radius:2px;
  background:#E6010B;
  margin:5px auto 0;
}
/* "More" tile — keep icon centered */
html body#index #cats .tiles > .tile.more .ti-i,
html body#index .tg-home-cats .tiles > .tile.more .ti-i{
  display:grid!important;
  place-items:center!important;
  background:#f4f4f4!important;
}
html body#index #cats .tiles > .tile.more .ti-i svg,
html body#index .tg-home-cats .tiles > .tile.more .ti-i svg{
  width:30px!important;height:30px!important;margin:auto;
}

/* Section chrome for injected /in/ block */
html body#index .tg-home-cats{
  background:#fff;
  border-radius:18px;
  padding:14px 5px 18px;
  margin:8px 5px 12px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  box-sizing:border-box;
}
html body#index .tg-home-cats .sh{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  margin:0 0 12px;padding:0 2px;
}
html body#index .tg-home-cats .sh h2{
  margin:0;font:700 clamp(20px,5vw,28px)/1.15 Poppins,sans-serif;letter-spacing:-.02em;color:#111;
}
html body#index .tg-home-cats .sh p{
  margin:4px 0 0;font:400 12.5px/1.4 Inter,sans-serif;color:#787880;
}
html body#index .tg-home-cats .sh > a{
  color:#E6010B;font:600 12.5px Poppins,sans-serif;text-decoration:none;white-space:nowrap;
}

@media (min-width:768px){
  html body#index #cats .tiles,
  html body#index section#cats .tiles,
  html body#index .tg-home-cats .tiles{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  html body#index .tg-home-cats{margin:12px 20px;padding:18px 16px 22px;}
}
@media (min-width:1200px){
  html body#index #cats .tiles,
  html body#index section#cats .tiles,
  html body#index .tg-home-cats .tiles{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:14px!important;
  }
  html body#index .tg-home-cats{margin:16px auto;max-width:1240px;padding:20px 20px 24px;}
}

/* Compact: no extra page-level margins from this module on /en/ #cats itself */
html body#index .tg5 #cats.sec{
  /* leave existing .sec padding; just ensure no overflow */
  overflow:visible!important;
  max-width:100%!important;
}

/* Label mode: short on mobile, long on desktop (works without .tg5 on /in/) */
html body#index #cats .tiles > .tile .tt .dk,
html body#index .tg-home-cats .tiles > .tile .tt .dk{display:none!important}
html body#index #cats .tiles > .tile .tt .mo,
html body#index .tg-home-cats .tiles > .tile .tt .mo{display:inline!important}
@media (min-width:992px){
  html body#index #cats .tiles > .tile .tt .dk,
  html body#index .tg-home-cats .tiles > .tile .tt .dk{display:inline!important}
  html body#index #cats .tiles > .tile .tt .mo,
  html body#index .tg-home-cats .tiles > .tile .tt .mo{display:none!important}
}