.tf-catalog{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;width:100%;max-width:1440px;box-sizing:border-box;margin-inline:auto;padding-inline:clamp(16px,3vw,40px);font-family:Inter,Arial,sans-serif}
.tf-catalog__filter-panel{min-width:0;align-self:start}
.tf-catalog__filter-toggle{display:block;cursor:pointer;font-weight:700;line-height:1.3;list-style:none}
.tf-catalog__filter-toggle::-webkit-details-marker{display:none}
.tf-catalog__filter-toggle::after{content:'+';float:right;font-size:1.25em;line-height:1}
.tf-catalog__filter-panel[open]>.tf-catalog__filter-toggle::after{content:'−'}
.tf-catalog__filters{display:flex;flex-direction:column;gap:12px;align-self:start}
.tf-catalog__filters input[type=search],.tf-catalog__filters input[type=text],.tf-catalog__filters button{min-height:44px;width:100%;box-sizing:border-box;padding:10px;font:inherit}
.tf-catalog__filters fieldset{border:1px solid #ddd;padding:12px;min-width:0}
.tf-catalog__filters fieldset label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;overflow-wrap:anywhere}
.tf-catalog__filters legend{font-weight:700}
.tf-catalog__results{min-width:0}.tf-catalog__count{margin:0 0 16px}
.tf-catalog__pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.tf-catalog__pagination a{padding:12px;color:inherit;min-height:44px;box-sizing:border-box}
.tf-catalog :focus-visible{outline:2px solid #111;outline-offset:3px}
.tf-catalog__filters select{min-height:44px;width:100%;box-sizing:border-box;padding:10px;font:inherit;background:#fff;color:#111}
.tf-catalog__reset{display:flex;align-items:center;justify-content:center;min-height:44px;color:inherit;text-align:center}
@media(min-width:769px){.tf-catalog__filter-toggle{display:none}}
/* Desktop catalog proportions follow the three-column Figma layout. */
@media(min-width:1200px){
  .tf-catalog{grid-template-columns:354px minmax(0,1fr);gap:0;padding-inline:0}
  .tf-catalog__filter-panel{padding:32px 20px 32px 16px;border-right:1px solid #ddd}
  .tf-catalog__results{padding:32px 16px 0 18px}
  .tf-catalog .tf-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .tf-catalog .tf-product-card{padding:16px 0 0}
  .tf-catalog .tf-product-card h3{font-size:18px;font-weight:700;line-height:1.05;margin:12px 16px;min-height:2.1em}
  .tf-catalog .tf-product-card__image{margin:0 20px;aspect-ratio:1/1}
  .tf-catalog .tf-product-card__meta{padding:12px 20px;font-size:20px}
  .tf-catalog .tf-product-card .tf-product-card__view{font-size:16px}
}
@media(min-width:769px) and (max-width:1199px){.tf-catalog .tf-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:768px){
  .tf-catalog{grid-template-columns:1fr;gap:16px;padding-inline:16px}
  .tf-catalog__filter-panel{border:1px solid #ddd;border-radius:2px}
  .tf-catalog__filter-toggle{min-height:44px;box-sizing:border-box;padding:12px 16px}
  .tf-catalog__filters{padding:0 16px 16px}
  .tf-catalog__filters fieldset{max-height:240px;overflow:auto}
}
/* Proposed, isolated visual treatment for the existing localized disclosure. */
@media (min-width: 769px) {
  .tf-catalog { position: relative; padding-top: 60px; }
  .tf-catalog__filter-toggle {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 0 16px 0 76px;
    background: linear-gradient(90deg, #555 0 60px, #000 60px);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    list-style: none;
    text-transform: uppercase;
  }
  .tf-catalog__filter-toggle::before {
    content: "";
    position: absolute;
    left: 16px;
    width: 24px;
    height: 24px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 62% 43%, 62% 100%, 40% 100%, 40% 43%);
  }
  .tf-catalog__filter-panel > .tf-catalog__filter-toggle::after { content: none; }
  .tf-catalog__filter-panel[open] > .tf-catalog__filter-toggle::after { content: none; }
}

@media (max-width: 768px) {
  .tf-catalog__filter-toggle {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 76px;
    background: linear-gradient(90deg, #555 0 60px, #000 60px);
    color: #fff;
    text-transform: uppercase;
  }
  .tf-catalog__filter-toggle::before {
    content: "";
    position: absolute;
    left: 16px;
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 62% 43%, 62% 100%, 40% 100%, 40% 43%);
  }
  .tf-catalog__filter-toggle::after {
    content: '+';
    float: none;
    margin-left: auto;
    font-size: 1.25em;
    line-height: 1;
  }
  .tf-catalog__filter-panel[open] > .tf-catalog__filter-toggle::after { content: '−'; }
}

/* White inset ring remains visible against the black disclosure bar. */
.tf-catalog__filter-toggle:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }


/* Shared shop-category hero: the 1440×566 Apparel frame. Background layer uses
   the original source and is decorative (aria-hidden), so the page heading stays
   the only accessible title. Cards and filters remain the catalogue component. */
.tf-category-hero {
  display: none;
  position: relative;
  isolation: isolate;
  width: min(100%, 1440px);
  margin-inline: auto;
  overflow: hidden;
  background: #303030;
}
.tf-category-hero__image {
  height: 500px;
  background: url("assets/home-news-polo-original.png") 50% 41.4% / 125.09% auto no-repeat;
}
.tf-category-hero__strip {
  height: 50px;
  background: rgb(0 0 0 / 60%);
}
.tf-category-hero__title {
  position: absolute;
  z-index: 1;
  top: 206px;
  right: 0;
  left: 0;
  margin: 0;
  color: #fff;
  font: 400 110px/.9 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 768px) { .tf-category-hero--30tcu { display: block; } }
@media (max-width: 767px) {
  .tf-category-hero__image { height: 360px; }
  .tf-category-hero__strip { height: 36px; }
  .tf-category-hero__title { top: 150px; font-size: clamp(52px, 17vw, 90px); }
}

/* Collapsible filter groups (mockup: accordion with chevron). The fieldset and
   its legend stay for assistive technology; the summary is the visible title. */
.tf-catalog__group{border-bottom:1px solid #e3e3e3;padding:4px 0}
.tf-catalog__group>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.tf-catalog__group>summary::-webkit-details-marker{display:none}
.tf-catalog__group>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg);transition:transform .2s ease;margin-right:4px}
.tf-catalog__group:not([open])>summary::after{transform:rotate(45deg)}
.tf-catalog__group>summary:focus-visible{outline:2px solid #9b0000;outline-offset:2px}
.tf-catalog__group fieldset{border:0;padding:0 0 8px;margin:0;max-height:320px;overflow:auto}
.tf-catalog__group-legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tf-catalog__group fieldset label{min-height:32px}
@media (prefers-reduced-motion:reduce){.tf-catalog__group>summary::after{transition:none}}

/* Mockup proportions: narrower sidebar, four-column grid on desktop. */
@media(min-width:1200px){
  .tf-catalog{grid-template-columns:280px minmax(0,1fr)}
  .tf-catalog .tf-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}