/* Fashion Brands collection — vector copy over clean reference artwork. */
body.term-fashion-brands {
  --fashion-ink: #101012;
  --fashion-red: #ed1737;
  overflow-x: clip;
  background: #fff;
}

body.term-fashion-brands .site-header { display: block; }
body.term-fashion-brands .shop-main { padding: 0 0 24px; background: #fff; overflow-x: clip; }
body.term-fashion-brands .shop-main > .container { max-width: 1540px; padding: 0 26px 18px; }
body.term-fashion-brands .woocommerce-products-header,
body.term-fashion-brands .shop-main > .container > .woocommerce-breadcrumb,
body.term-fashion-brands .shop-category-description-accordion { display: none; }

/* Keep the garment filters above the editorial layout while the visitor scrolls. */
body.term-fashion-brands .shop-quick-links { z-index: 70; }

body.term-fashion-brands .fashion-landing,
body.term-fashion-brands .fashion-reference-hero,
body.term-fashion-brands .fashion-reference-categories,
body.term-fashion-brands .fashion-reference-story,
body.term-fashion-brands .fashion-reference-benefits { width: 100vw; margin-left: calc(50% - 50vw); }

body.term-fashion-brands .fashion-reference-hero {
  position: relative;
  aspect-ratio: 1024 / 486;
  min-height: 430px;
  overflow: hidden;
  background: #e8e8e6 url('../images/fashion-hero-art.webp') center / cover no-repeat;
}

body.term-fashion-brands .fashion-reference-hero__breadcrumb {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 4.7%;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #555;
  font-size: 12px;
}
body.term-fashion-brands .fashion-reference-hero__breadcrumb a { color: #222; text-decoration: none; }
body.term-fashion-brands .fashion-reference-hero__breadcrumb b { color: #222; }

body.term-fashion-brands .fashion-reference-hero__left-panel {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  display: flex;
  width: 52%;
  flex-direction: column;
  justify-content: center;
  padding: 5% 0 3% 4.7%;
  background:
    radial-gradient(circle at 20% 13%, rgb(255 255 255 / 65%) 0 1px, transparent 1.5px),
    linear-gradient(110deg, #f3f3f1 0%, #e9e9e7 76%, rgb(233 233 231 / 92%) 100%);
  background-size: 17px 17px, auto;
}
body.term-fashion-brands .fashion-reference-hero__left-panel::after {
  position: absolute;
  top: 0;
  right: -16%;
  bottom: 0;
  width: 18%;
  content: '';
  background: linear-gradient(90deg, #e9e9e7, rgb(233 233 231 / 0%));
  pointer-events: none;
}
body.term-fashion-brands .fashion-reference-hero__eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 1.2%;
  color: var(--fashion-red);
  font-size: clamp(.75rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: .4em;
}
body.term-fashion-brands .fashion-reference-hero__left-panel h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--fashion-ink);
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-size: clamp(3.2rem, 8.2vw, 8.3rem);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .78;
}
body.term-fashion-brands .fashion-reference-hero__tagline {
  position: relative;
  z-index: 1;
  margin-top: 4.2%;
  color: var(--fashion-ink);
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 1;
}
body.term-fashion-brands .fashion-reference-hero__left-panel p {
  position: relative;
  z-index: 1;
  margin: 2.1% 0 0;
  color: #252529;
  font-size: clamp(.78rem, 1.2vw, 1.12rem);
  line-height: 1.4;
}
body.term-fashion-brands .fashion-reference-hero__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 22px;
  margin-top: 2.2%;
  padding: 14px 22px;
  color: #fff;
  font-size: clamp(.76rem, 1.1vw, 1rem);
  font-weight: 800;
  background: var(--fashion-red);
  border-radius: 3px;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}
body.term-fashion-brands .fashion-reference-hero__cta:hover { filter: brightness(.9); transform: translateY(-2px); }
body.term-fashion-brands .fashion-reference-hero__keywords {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: #27272a;
  font-size: clamp(.56rem, .78vw, .75rem);
  font-weight: 600;
  letter-spacing: .11em;
}
body.term-fashion-brands .fashion-reference-hero__right-copy {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 0;
  bottom: 10%;
  display: flex;
  width: 16%;
  align-items: center;
  justify-content: center;
  padding: 1.5%;
  color: #111;
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-size: clamp(.95rem, 1.9vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: .04em;
  text-align: center;
  background: rgb(216 216 213 / 98%);
}

body.term-fashion-brands .fashion-reference-categories { position: relative; background: #fff; }
body.term-fashion-brands .fashion-reference-categories__desktop {
  position: relative;
  aspect-ratio: 1024 / 282;
  background: url('../images/fashion-reference-categories.webp') center / 100% 100% no-repeat;
}
body.term-fashion-brands .fashion-reference-categories__hit {
  position: absolute;
  top: 4.5%;
  bottom: 4.5%;
  display: block;
  border-radius: 3px;
}
body.term-fashion-brands .fashion-reference-categories__hit:hover { background: rgb(255 255 255 / 6%); }
body.term-fashion-brands .fashion-reference-categories__hit--graphic { left: 2.4%; width: 23%; }
body.term-fashion-brands .fashion-reference-categories__hit--irony { left: 26.7%; width: 22.8%; }
body.term-fashion-brands .fashion-reference-categories__hit--him { left: 50.6%; width: 22.7%; }
body.term-fashion-brands .fashion-reference-categories__hit--her { left: 74.7%; width: 23%; }
body.term-fashion-brands .fashion-reference-categories__mobile { display: none; }

body.term-fashion-brands .fashion-popular {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 28px 26px 34px;
  background: #fff;
}
body.term-fashion-brands .fashion-popular__heading { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
body.term-fashion-brands .fashion-popular__heading h2 {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 18px;
  margin: 0;
  color: var(--fashion-ink);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: .18em;
  white-space: nowrap;
}
body.term-fashion-brands .fashion-popular__heading h2::after { display: block; height: 1px; flex: 1; content: ''; background: #c6c6c6; }
body.term-fashion-brands .fashion-popular__heading a { color: var(--fashion-ink); font-size: 13px; white-space: nowrap; }
body.term-fashion-brands .fashion-popular__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
body.term-fashion-brands .fashion-product-card { position: relative; display: block; min-width: 0; color: var(--fashion-ink); }
body.term-fashion-brands .fashion-product-card__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f2f2f2; }
body.term-fashion-brands .fashion-product-card__image img { width: 100%; height: 100%; object-fit: contain; }
body.term-fashion-brands .fashion-product-card__name { display: block; min-height: 34px; margin-top: 9px; font-size: 13px; line-height: 1.25; }
body.term-fashion-brands .fashion-product-card strong { display: block; margin-top: 5px; font-size: 17px; font-weight: 800; }
body.term-fashion-brands .fashion-product-card__cart { position: absolute; right: 4px; bottom: 0; display: grid; width: 30px; height: 30px; place-items: center; color: #fff; background: #080808; border-radius: 4px; font-size: 15px; }

body.term-fashion-brands .fashion-reference-story { aspect-ratio: 1024 / 252; background: url('../images/fashion-reference-story.webp') center / 100% 100% no-repeat; }
body.term-fashion-brands .fashion-reference-benefits { aspect-ratio: 1024 / 116; background: url('../images/fashion-reference-benefits.webp') center / 100% 100% no-repeat; }
body.term-fashion-brands:not(.paged):not(.fashion-filtered) .woocommerce-result-count,
body.term-fashion-brands:not(.paged):not(.fashion-filtered) .woocommerce-ordering,
body.term-fashion-brands:not(.paged):not(.fashion-filtered) ul.products,
body.term-fashion-brands:not(.paged):not(.fashion-filtered) .woocommerce-pagination { display: none; }

@media (max-width: 760px) {
  body.term-fashion-brands .shop-main > .container { padding: 0 12px 18px; }
  body.term-fashion-brands .fashion-reference-hero { min-height: 560px; aspect-ratio: auto; background-size: auto 560px; background-position: 70% center; }
  body.term-fashion-brands .fashion-reference-hero::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, rgb(243 243 241 / 98%) 0%, rgb(243 243 241 / 86%) 50%, rgb(243 243 241 / 7%) 100%); }
  body.term-fashion-brands .fashion-reference-hero__breadcrumb { top: 14px; left: 16px; gap: 6px; font-size: 10px; }
  body.term-fashion-brands .fashion-reference-hero__left-panel { z-index: 2; width: 88%; padding: 32px 16px 24px; background: transparent; }
  body.term-fashion-brands .fashion-reference-hero__left-panel::after { display: none; }
  body.term-fashion-brands .fashion-reference-hero__eyebrow { margin-bottom: 16px; font-size: 11px; }
  body.term-fashion-brands .fashion-reference-hero__left-panel h1 { font-size: clamp(3rem, 15vw, 5rem); }
  body.term-fashion-brands .fashion-reference-hero__tagline { margin-top: 21px; font-size: clamp(1.15rem, 5.6vw, 1.55rem); }
  body.term-fashion-brands .fashion-reference-hero__left-panel p { margin-top: 17px; font-size: 13px; }
  body.term-fashion-brands .fashion-reference-hero__cta { margin-top: 22px; padding: 13px 18px; font-size: 12px; }
  body.term-fashion-brands .fashion-reference-hero__keywords { font-size: 7px; letter-spacing: .08em; }
  body.term-fashion-brands .fashion-reference-hero__right-copy { display: none; }
  body.term-fashion-brands .fashion-reference-categories__desktop { display: none; }
  body.term-fashion-brands .fashion-reference-categories__mobile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
  body.term-fashion-brands .fashion-reference-category-card { display: block; min-height: 190px; background: var(--fashion-card-image) center / cover no-repeat; border-radius: 3px; }
  body.term-fashion-brands .fashion-popular { padding: 24px 12px 28px; }
  body.term-fashion-brands .fashion-popular__heading { align-items: flex-end; gap: 9px; margin-bottom: 13px; }
  body.term-fashion-brands .fashion-popular__heading h2 { gap: 9px; font-size: 12px; letter-spacing: .1em; white-space: normal; }
  body.term-fashion-brands .fashion-popular__heading a { font-size: 10px; }
  body.term-fashion-brands .fashion-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 9px; }
  body.term-fashion-brands .fashion-product-card__name { min-height: 30px; font-size: 11px; }
  body.term-fashion-brands .fashion-product-card strong { font-size: 15px; }
  body.term-fashion-brands .fashion-product-card__cart { width: 27px; height: 27px; font-size: 13px; }
  body.term-fashion-brands .fashion-reference-story { min-height: 210px; aspect-ratio: auto; background-size: auto 210px; }
  body.term-fashion-brands .fashion-reference-benefits { min-height: 160px; aspect-ratio: auto; background-size: auto 160px; }
}