/*! tg-category-ux.css — Teesgraphy category listing redesign (PREVIEW, 2026-11-09)
   Scope: html.tg-cux (added by tg-category-ux.js only on body#category, shops 50 /en/ + 72 /in/).
   If the JS does not run, NOTHING here applies (safe no-op).
   Does not touch cart / checkout / product pages / Studio.
   Brand: red #E6010B used sparingly (CTA + active states). Never "Add to Cart".
*/
html.tg-cux{
  --cux-red:#E6010B; --cux-red-d:#c00009; --cux-ink:#16181d; --cux-mute:#6b7080;
  --cux-line:#ececf0; --cux-bg:#f6f6f8; --cux-r:14px; --cux-r-s:10px;
  --cux-sh:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.06);
  --cux-sh-h:0 2px 4px rgba(16,24,40,.06),0 12px 28px rgba(16,24,40,.10);
  --cux-gap:8px;
}

/* ---------- 1. Compact category header ---------- */
html.tg-cux body#category .elementor-widget-page-title .elementor-heading-title{
  font-size:24px!important; line-height:1.2!important; font-weight:700!important;
  letter-spacing:-.01em; margin:4px 0 0!important; color:var(--cux-ink)!important;
}
html.tg-cux body#category .elementor-widget-page-title{margin-bottom:4px!important; width:100%!important; max-width:100%!important}
html.tg-cux body#category .elementor-widget-page-title + .elementor-widget-divider,
html.tg-cux body#category .elementor-widget-page-title .elementor-heading-title:after{display:none!important}
html.tg-cux .tg-cux-sub,
html.tg-cux body#category .tg-catdesc{
  background:none!important; border:0!important; border-radius:0!important;
  padding:0!important; margin:2px 0 8px!important; color:var(--cux-mute)!important;
  font-size:13.5px!important; line-height:1.5!important;
}
html.tg-cux body#category .tg-catdesc{max-width:820px}
html.tg-cux body#category .tg-catdesc.is-collapsed .tg-catdesc__body{max-height:3em!important}
html.tg-cux body#category .tg-catdesc.is-collapsed .tg-catdesc__body:after{background:linear-gradient(rgba(255,255,255,0),#fff)!important}
html.tg-cux body#category .tg-catdesc__more{min-height:24px!important;padding:2px 0!important;margin:0!important;font-size:13px!important;color:var(--cux-ink)!important;text-underline-offset:3px}
html.tg-cux .tg-cux-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:780px}
html.tg-cux body#category .elementor-widget-breadcrumb{font-size:12px!important;opacity:.85;margin-bottom:6px!important}
html.tg-cux body#category .elementor-widget-breadcrumb *{font-size:12px!important}

/* ---------- 2. Sub-category chips (horizontal scroll, never clipped) ---------- */
html.tg-cux body#category .elementor-widget-category-grid{margin-bottom:10px!important}
html.tg-cux body#category .elementor-widget-category-grid .ce-image-gallery{
  display:flex!important; flex-wrap:nowrap!important; gap:8px!important; overflow-x:auto!important;
  padding:2px 0 6px!important; scroll-snap-type:x proximity; scrollbar-width:none; grid-template-columns:none!important;
}
html.tg-cux body#category .elementor-widget-category-grid .ce-image-gallery::-webkit-scrollbar{display:none}
html.tg-cux body#category .elementor-widget-category-grid .ce-gallery-item{
  flex:0 0 auto!important; width:auto!important; max-width:none!important; margin:0!important;
  display:flex!important; flex-direction:row!important; align-items:center; gap:8px; padding:4px 14px 4px 4px!important;
  background:#fff!important; border:1px solid var(--cux-line)!important; border-radius:999px!important;
  box-shadow:none!important; scroll-snap-align:start; transition:border-color .15s;
}
html.tg-cux body#category .elementor-widget-category-grid .ce-gallery-item:hover{border-color:var(--cux-ink)!important}
html.tg-cux body#category .elementor-widget-category-grid .ce-gallery-icon{
  width:34px!important; height:34px!important; flex:0 0 34px; border-radius:50%!important; overflow:hidden;
  background:var(--cux-bg); border:0!important; padding:0!important; margin:0!important; position:relative;
}
html.tg-cux body#category .elementor-widget-category-grid .ce-gallery-icon img{
  position:static!important; width:100%!important; height:100%!important; object-fit:cover!important; border-radius:50%!important; transform:none!important;
}
html.tg-cux body#category .elementor-widget-category-grid .ce-gallery-caption{
  position:static!important; margin:0!important; padding:0!important; background:none!important; border:0!important;
  font-size:13px!important; font-weight:600!important; white-space:nowrap!important; color:var(--cux-ink)!important; text-align:left!important;
}
html.tg-cux body#category .elementor-widget-category-grid .ce-gallery-caption a{color:inherit!important}

/* ---------- 3. Filter / Sort bar ---------- */
html.tg-cux .tg-cux-bar{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
  margin:0 0 10px; padding:8px 0; background:#fff; z-index:40;
}
html.tg-cux .tg-cux-bar__btn,
html.tg-cux .tg-cux-bar__sort{
  flex:1 1 0; min-width:0; height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--cux-line); border-radius:999px; background:#fff; color:var(--cux-ink);
  font:600 14px/1 inherit; font-family:inherit; cursor:pointer; padding:0 14px; box-shadow:var(--cux-sh);
}
html.tg-cux .tg-cux-bar__btn svg,html.tg-cux .tg-cux-bar__sort svg{width:17px;height:17px;flex:0 0 17px}
html.tg-cux .tg-cux-bar__sort{position:relative; margin:0!important}
html.tg-cux .tg-cux-sentinel{height:1px; margin:0; padding:0; position:relative}
html.tg-cux body#category .tg-cux-listwrap{gap:0!important; row-gap:0!important}
html.tg-cux body#category .tg-cux-listwrap > .elementor-widget-category-grid{margin-bottom:6px!important}
html.tg-cux .tg-cux-bar__sort select{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; font-size:16px}
html.tg-cux .tg-cux-bar__sort span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tg-cux .tg-cux-bar__badge{min-width:18px;height:18px;border-radius:9px;background:var(--cux-red);color:#fff;font-size:11px;line-height:18px;text-align:center;padding:0 5px}
html.tg-cux .tg-cux-bar__badge:empty{display:none}
html.tg-cux .tg-cux-bar__count{display:none;color:var(--cux-mute);font-size:13px;white-space:nowrap}
/* hide the original Filters pill on mobile — the bar button triggers it */
html.tg-cux body#category .elementor-widget-listing-filters .ce-filters__toggle{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;margin:0!important;padding:0!important}
html.tg-cux body#category .elementor-widget-listing-filters{margin:0!important}

@media (max-width:1024px){
  html.tg-cux .tg-cux-bar{position:sticky; top:var(--tg-cux-top,0px); margin-left:-5px; margin-right:-5px; padding:8px 5px; width:calc(100% + 10px);
    border-bottom:1px solid transparent; transition:border-color .15s, box-shadow .15s}
  html.tg-cux .tg-cux-bar.is-stuck{border-bottom-color:var(--cux-line); box-shadow:0 6px 12px -10px rgba(16,24,40,.25)}
  /* mobile facet drawer (CE lightbox) → bottom-friendly side drawer */
  html.tg-cux body#category .ce-filters__container.elementor-lightbox .ce-filters{
    border-radius:0 var(--cux-r) var(--cux-r) 0!important; padding:18px 16px 24px!important; background:#fff!important;
  }
}
@media (min-width:1025px){
  html.tg-cux .tg-cux-bar{justify-content:flex-end; padding:0; margin-bottom:14px}
  html.tg-cux .tg-cux-bar__btn{display:none}
  html.tg-cux .tg-cux-bar__sort{flex:0 0 auto; min-width:220px; box-shadow:none}
  html.tg-cux .tg-cux-bar__count{display:block; margin-right:auto}
}

/* ---------- 4. Desktop: filters become a sticky left sidebar ---------- */
@media (min-width:1025px){
  html.tg-cux body#category .tg-cux-listwrap{
    display:grid!important; grid-template-columns:248px minmax(0,1fr); column-gap:28px; align-items:start;
    max-width:1320px; margin:0 auto!important;
  }
  html.tg-cux body#category .tg-cux-listwrap.tg-cux-nopanel{grid-template-columns:minmax(0,1fr)}
  html.tg-cux body#category .tg-cux-listwrap > *{grid-column:-2 / -1; width:auto!important; min-width:0}
  html.tg-cux body#category .tg-cux-listwrap > .elementor-widget-category-grid{grid-column:1 / -1}
  html.tg-cux body#category .tg-cux-listwrap > .elementor-widget-listing-filters{
    grid-column:1 / 2; grid-row:2 / span 4; position:sticky; top:16px;
    background:#fff; border:1px solid var(--cux-line); border-radius:var(--cux-r); padding:6px 16px 10px!important; box-shadow:var(--cux-sh);
    max-height:calc(100vh - 32px); overflow:auto;
  }
  html.tg-cux body#category .tg-cux-listwrap > .elementor-widget-listing-filters:before{
    content:"Filter"; display:block; font-weight:700; font-size:15px; padding:10px 0 6px; color:var(--cux-ink); border-bottom:1px solid var(--cux-line); margin-bottom:2px;
  }
  html.tg-cux body#category .elementor-widget-listing-filters .ce-filters__tab{padding:12px 0!important; margin:0!important; border-bottom:1px solid var(--cux-line)!important; font-size:14px!important}
  html.tg-cux body#category .elementor-widget-listing-filters .elementor-field-group:last-child .ce-filters__tab{border-bottom:0!important}
}

/* ---------- 5. Product grid ---------- */
html.tg-cux body#category .ce-product-grid{
  align-items:stretch!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:var(--cux-gap)!important; grid-gap:var(--cux-gap)!important;
}
@media (min-width:768px){ html.tg-cux{--cux-gap:14px} html.tg-cux body#category .ce-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (min-width:1025px){ html.tg-cux{--cux-gap:18px} html.tg-cux body#category .ce-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important} }

/* ---------- 6. Product card ---------- */
html.tg-cux body#category .ce-product-grid > .elementor{
  width:auto!important; max-width:none!important; margin:0!important; padding:0!important; height:100%;
  background:#fff!important; border:1px solid var(--cux-line)!important; border-radius:var(--cux-r)!important;
  box-shadow:var(--cux-sh)!important; overflow:hidden!important; transition:box-shadow .2s, transform .2s; display:flex!important; flex-direction:column!important; align-self:stretch!important;
}
@media (hover:hover){ html.tg-cux body#category .ce-product-grid > .elementor:hover{box-shadow:var(--cux-sh-h)!important; transform:translateY(-2px)} }
html.tg-cux body#category .ce-product-grid > .elementor > article,
html.tg-cux body#category .ce-product-grid > .elementor section.elementor-top-section,
html.tg-cux body#category .ce-product-grid > .elementor section.elementor-top-section > .elementor-container,
html.tg-cux body#category .ce-product-grid > .elementor section.elementor-top-section > .elementor-container > .elementor-row,
html.tg-cux body#category .ce-product-grid > .elementor .elementor-top-column,
html.tg-cux body#category .ce-product-grid > .elementor .elementor-top-column > .elementor-column-wrap,
html.tg-cux body#category .ce-product-grid > .elementor .elementor-top-column > .elementor-column-wrap > .elementor-widget-wrap{
  height:100%!important; display:flex!important; flex-direction:column!important; width:100%!important;
  padding:0!important; margin:0!important; background:transparent!important; border:0!important; box-shadow:none!important; min-height:0!important; border-radius:0!important;
}
html.tg-cux body#category .ce-product-grid > .elementor .elementor-widget{margin:0!important}
/* image box: uniform square, contain on light bg */
html.tg-cux body#category .ce-product-grid .elementor-widget-product-miniature-image{flex:0 0 auto!important; width:100%!important}
html.tg-cux body#category .ce-product-grid .ce-product-image{
  position:relative!important; aspect-ratio:1/1!important; width:100%!important; height:auto!important; max-height:none!important;
  background:var(--cux-bg)!important; border-radius:0!important; overflow:hidden!important; margin:0!important; padding:0!important;
}
html.tg-cux body#category .ce-product-grid .ce-product-image > a{display:block!important; width:100%!important; height:100%!important}
html.tg-cux body#category .ce-product-grid .ce-product-image img{
  width:100%!important; height:100%!important; max-height:none!important; object-fit:contain!important; object-position:center!important;
  mix-blend-mode:multiply; padding:0!important; border-radius:0!important; transition:transform .35s ease;
}
@media (hover:hover){ html.tg-cux body#category .ce-product-grid > .elementor:hover .ce-product-image img{transform:scale(1.035)} }
/* MOQ badge */
html.tg-cux body#category .ce-product-grid .c73-badge,
html.tg-cux body#category .ce-product-grid .c64-real-minimum.c73-badge{
  position:absolute!important; top:8px!important; left:8px!important; right:auto!important; bottom:auto!important;
  background:rgba(22,24,29,.82)!important; color:#fff!important; font-size:10.5px!important; font-weight:600!important;
  line-height:1!important; padding:5px 8px!important; border-radius:999px!important; letter-spacing:.01em; z-index:2;
}
html.tg-cux body#category .ce-product-grid .ce-product-image[data-moq]:before,
html.tg-cux body#category .ce-product-grid .ce-product-image[data-moq]:after{
  top:8px!important; left:8px!important; bottom:auto!important; right:auto!important; border-radius:999px!important;
  font-size:10.5px!important; padding:5px 8px!important; line-height:1!important; background:rgba(22,24,29,.82)!important;
}
/* hide legacy card CTAs: /en/ pencil rail, /in/ arrow-that-looks-like-a-cart icon */
html.tg-cux body#category .ce-product-grid .c73-rail,
html.tg-cux body#category .ce-product-grid .elementor-widget-icon,
html.tg-cux body#category .ce-product-grid .c64-meta .c64-moq,
html.tg-cux body#category .ce-product-grid .ce-product-prices > .c64-real-minimum:not(.c73-badge){display:none!important}
/* body */
html.tg-cux body#category .ce-product-grid section.elementor-inner-section{
  flex:1 1 auto!important; display:flex!important; padding:10px 10px 12px!important; margin:0!important; background:#fff!important;
}
html.tg-cux body#category .ce-product-grid section.elementor-inner-section > .elementor-container,
html.tg-cux body#category .ce-product-grid section.elementor-inner-section .elementor-row,
html.tg-cux body#category .ce-product-grid section.elementor-inner-section .elementor-column,
html.tg-cux body#category .ce-product-grid section.elementor-inner-section .elementor-column-wrap,
html.tg-cux body#category .ce-product-grid section.elementor-inner-section .elementor-widget-wrap{
  display:flex!important; flex-direction:column!important; flex:1 1 auto!important; width:100%!important; padding:0!important; margin:0!important; gap:0!important;
}
html.tg-cux body#category .ce-product-grid .elementor-widget-product-miniature-name{width:100%!important}
html.tg-cux body#category .ce-product-grid .ce-product-name{
  font-size:13.5px!important; line-height:1.35!important; font-weight:600!important; color:var(--cux-ink)!important;
  margin:0 0 6px!important; padding:0!important; min-height:2.7em; text-align:left!important;
  display:-webkit-box!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden!important; white-space:normal!important; text-overflow:clip!important;
}
html.tg-cux body#category .ce-product-grid .ce-product-name a{color:inherit!important}
html.tg-cux body#category .ce-product-grid .elementor-widget-product-miniature-price{width:100%!important; margin-top:auto!important}
html.tg-cux body#category .ce-product-grid .ce-product-prices{display:flex!important; flex-wrap:wrap; align-items:baseline; gap:2px 6px; justify-content:flex-start!important; text-align:left!important}
html.tg-cux body#category .ce-product-grid .ce-product-price,
html.tg-cux body#category .ce-product-grid .ce-product-price span{font-size:16px!important; font-weight:700!important; color:var(--cux-ink)!important; line-height:1.2!important; letter-spacing:-.01em}
html.tg-cux body#category .ce-product-grid .ce-product-price-regular,
html.tg-cux body#category .ce-product-grid .ce-product-prices del,
html.tg-cux body#category .ce-product-grid .ce-product-prices s{font-size:12px!important; color:#9aa0ab!important; font-weight:500!important; order:2}
html.tg-cux body#category .ce-product-grid .ce-product-badge,
html.tg-cux body#category .ce-product-grid .discount-percentage{background:#fff1f1!important;color:var(--cux-red-d)!important;font-size:11px!important;border-radius:6px!important;padding:2px 6px!important}
html.tg-cux body#category .ce-product-grid .c64-meta{flex-basis:100%; margin:2px 0 0!important; padding:0!important; list-style:none}
html.tg-cux body#category .ce-product-grid .c64-meta li,
html.tg-cux body#category .ce-product-grid .c64-gst{font-size:11px!important; color:var(--cux-mute)!important; margin:0!important}
/* CTA (injected): Customise + Request a Quote only */
html.tg-cux .tg-cux-cta{display:flex; flex-direction:column; gap:6px; margin-top:auto; padding:0 10px 10px; width:100%; box-sizing:border-box; background:#fff}
html.tg-cux body#category .ce-product-grid section.elementor-inner-section{padding-bottom:10px!important}
html.tg-cux .tg-cux-btn{
  display:flex; align-items:center; justify-content:center; gap:6px; height:38px; border-radius:999px;
  background:var(--cux-red); color:#fff!important; font-size:13.5px; font-weight:700; text-decoration:none!important; letter-spacing:.01em;
  transition:background .15s;
}
html.tg-cux .tg-cux-btn svg{width:15px;height:15px}
html.tg-cux .tg-cux-btn:hover{background:var(--cux-red-d)}
html.tg-cux .tg-cux-quote{display:block; text-align:center; font-size:12px; font-weight:600; color:var(--cux-ink)!important; text-decoration:underline!important; text-underline-offset:3px; padding:2px 0}
@media (min-width:768px){ html.tg-cux .tg-cux-cta{padding:0 14px 14px} html.tg-cux body#category .ce-product-grid section.elementor-inner-section{padding:12px 14px 10px!important} html.tg-cux body#category .ce-product-grid .ce-product-name{font-size:14.5px!important} html.tg-cux body#category .ce-product-grid .ce-product-price span{font-size:17px!important} html.tg-cux .tg-cux-btn{height:40px;font-size:14px} }

/* ---------- 7. Pagination ---------- */
html.tg-cux body#category .ce-pagination{display:flex!important; justify-content:center!important; align-items:center; gap:6px; margin:22px 0 8px!important; flex-wrap:wrap}
html.tg-cux body#category .ce-pagination .elementor-icon-list-items{display:flex!important; gap:6px!important; margin:0!important}
html.tg-cux body#category .ce-pagination .elementor-icon-list-item{
  min-width:42px; height:42px; padding:0 12px!important; margin:0!important; display:inline-flex!important; align-items:center; justify-content:center;
  border:1px solid var(--cux-line)!important; border-radius:999px!important; background:#fff!important; font-weight:600!important; font-size:14px!important; color:var(--cux-ink)!important;
}
html.tg-cux body#category .ce-pagination .elementor-icon-list-item:after{display:none!important}
html.tg-cux body#category .ce-pagination .elementor-icon-list-item.ce-current,
html.tg-cux body#category .ce-pagination .elementor-icon-list-item.current,
html.tg-cux body#category .ce-pagination .elementor-icon-list-item[aria-current]{background:var(--cux-ink)!important; border-color:var(--cux-ink)!important; color:#fff!important}
html.tg-cux body#category .ce-pagination .elementor-icon-list-item.ce-current *{color:#fff!important}
html.tg-cux body#category .ce-pagination .ce-disabled{opacity:.35}

/* ---------- 8. Empty category ---------- */
html.tg-cux .tg-cux-empty{
  text-align:center; padding:28px 18px!important; background:var(--cux-bg); border-radius:var(--cux-r); margin:6px 0 14px;
}
html.tg-cux .tg-cux-empty h4{font-size:18px!important; font-weight:700!important; margin:0 0 6px!important; color:var(--cux-ink)}
html.tg-cux .tg-cux-empty p{color:var(--cux-mute); font-size:14px; margin:0 0 14px!important}
html.tg-cux .tg-cux-empty #search_widget{max-width:420px; margin:0 auto 14px!important}
html.tg-cux .tg-cux-empty__cta{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
html.tg-cux .tg-cux-empty__cta a{flex:0 1 200px}
html.tg-cux .tg-cux-btn--ghost{background:#fff; color:var(--cux-ink)!important; border:1px solid var(--cux-line)}
html.tg-cux .tg-cux-btn--ghost:hover{background:#fff; border-color:var(--cux-ink)}

/* ---------- 9. "Made in Hyderabad" intro: stop the illustration eating a full mobile screen ---------- */
@media (max-width:767px){
  html.tg-cux body#category .tgb-catintro .tgb-catimg img{max-height:120px!important; width:auto!important; margin:0 auto; display:block}
  html.tg-cux body#category .tgb-catintro .tgb-catimg .elementor-image{background:none!important; padding:0!important}
  html.tg-cux body#category .tgb-catintro{padding-top:12px!important}
}

/* ---------- 10. Specificity guards (beat shop50-chrome / c73 card rules) ---------- */
html.tg-cux body#category#category .ce-product-grid > .elementor section.elementor-inner-section.elementor-element,
html.tg-cux body#category#category .ce-product-grid > .elementor section.elementor-inner-section.elementor-element:not(.elementor-motion-effects-element-type-background){
  background:#fff!important; background-color:#fff!important;
}
@media (min-width:1025px){
  html.tg-cux body#category .tg-cux-listwrap > .elementor-widget-listing-filters{top:calc(var(--tg-cux-top,0px) + 16px)!important; max-height:calc(100vh - var(--tg-cux-top,0px) - 32px)}
}