﻿.homePerformance {
  --home-accent: #111111;
  --home-accent-dark: #333333;
  --home-ink: #171717;
  --home-muted: #606060;
  --home-line: #dddddd;
  --home-surface: #f7f7f7;
  --home-card: #fff;
  margin: 0;
  background: var(--home-surface);
  color: var(--home-ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  overflow-x: hidden;
}

.homePerformance .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.homePerformance h1,
.homePerformance h2,
.homePerformance h3,
.homePerformance h4 {
  font-family: "Hanken Grotesk", Inter, Arial, sans-serif;
  letter-spacing: 0;
}

.homeNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(20px, 5vw, 64px);
  background: rgba(247, 248, 255, .86);
  border-bottom: 1px solid rgba(23,23,23, .08);
  backdrop-filter: blur(14px);
}

.homeBrand img {
  width: 118px;
  height: 54px;
  object-fit: contain;
  display: block;
}

.homeNav nav {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 1;
}

.homeNav nav .navItem > a,
.homeNav nav > a {
  font-size: 13px;
  color: #373737;
  font-weight: 700;
  padding: 27px 0 23px;
  border-bottom: 3px solid transparent;
}

.homeNav nav .navItem > a:hover,
.homeNav nav .navItem > a.active,
.homeNav nav > a:hover,
.homeNav nav > a.active {
  color: #141414;
  border-bottom-color: var(--home-accent);
}

.navItem {
  height: 72px;
  display: flex;
  align-items: center;
}

.megaMenu {
  position: fixed;
  left: 0;
  right: 0;
  top: 72px;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) 160px;
  gap: 42px;
  padding: 32px clamp(20px, 5vw, 64px);
  background: #fff;
  border-top: 1px solid rgba(23,23,23, .06);
  box-shadow: 0 24px 45px rgba(27,27,27, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.navItem:hover .megaMenu,
.navItem:focus-within .megaMenu,
.navItem.megaOpen .megaMenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.compactMega {
  grid-template-columns: repeat(2, minmax(180px, 260px));
  justify-content: center;
}

.megaMenu h3 {
  margin: 0 0 15px;
  color: #171717;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 900;
}

.megaMenu div a {
  display: block;
  color: #171717;
  margin: 0 0 13px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.megaMenu div a:hover {
  color: var(--home-accent-dark);
}

.megaPromo {
  min-height: 150px;
  align-self: stretch;
  border-radius: 6px;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.78)), var(--promo);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.megaPromo span,
.megaPromo strong {
  text-transform: uppercase;
  font-family: "Hanken Grotesk";
  font-size: 18px;
  line-height: .95;
}

.megaPromo strong {
  color: var(--home-accent);
}

.homeMenu {
  display: none;
  border: 0;
  background: transparent;
  color: var(--home-ink);
  width: 42px;
  height: 42px;
}

.homeActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.homeActions button {
  height: 40px;
  border: 0;
  background: transparent;
  color: #171717;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.homeActions button:not(.searchPill) {
  width: 40px;
}

.searchPill {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px;
  min-width: 260px;
  padding: 0 18px !important;
  background: #fff !important;
  border: 1px solid #d6d6d6 !important;
  color: #727272 !important;
  font-size: 12px;
}

.cartIcon {
  position: relative;
}

.cartIcon b {
  position: absolute;
  right: 1px;
  top: 0;
  background: var(--home-accent);
  color: #111;
  border-radius: 999px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
}

.stitchHero {
  position: relative;
  min-height: 92vh;
  padding-top: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #9a9a9a;
}

.stitchHeroVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.7) contrast(1.02) brightness(.82);
}

.stitchHeroShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44,44,44, .24), rgba(64,64,64, .42)), rgba(141, 143, 147, .4);
  z-index: 1;
}

.stitchHeroContent {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 40px));
  text-align: center;
  color: #fff;
  margin-top: 24px;
}

.stitchHeroContent h1 {
  margin: 0 auto 20px;
  text-transform: uppercase;
  font-size: clamp(46px, 7vw, 78px);
  line-height: .96;
  font-weight: 900;
  text-wrap: balance;
}

.stitchHeroContent h1 span {
  display: block;
  color: var(--home-accent);
}

.stitchHeroContent p {
  max-width: 640px;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, .9);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
}

.heroCtas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stitchBtn {
  height: 48px;
  min-width: 178px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 22px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  border: 1px solid currentColor;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.stitchBtn:hover {
  transform: translateY(-2px);
}

.stitchBtn.primary {
  background: var(--home-accent);
  border-color: var(--home-accent);
  color: #1b1b1b;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
}

.stitchBtn.secondary {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .95);
}

.stitchBtn.darkText {
  color: #111;
  background: #fff;
  border-color: #111;
}

.scrollCue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  color: #fff;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.benefitStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--home-accent);
  color: #1b1b1b;
  min-height: 78px;
  padding: 0 clamp(20px, 5vw, 64px);
  align-items: center;
}

.benefitStrip div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-transform: uppercase;
}

.benefitStrip strong {
  font-size: 13px;
  font-weight: 900;
}

.benefitStrip small {
  font-size: 10px;
  color: #3a3a3a;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.campaignSection {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 56px clamp(20px, 5vw, 64px) 22px;
  background: #f7f7f7;
}

.campaignCard {
  min-height: 230px;
  border-radius: 8px;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: linear-gradient(180deg, rgba(12,12,12, .06), rgba(12,12,12, .82)), var(--image);
  background-size: cover;
  background-position: center;
}

.campaignCard span {
  width: fit-content;
  background: var(--home-accent);
  color: #1b1b1b;
  border-radius: 999px;
  padding: 6px 10px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.campaignCard h2,
.campaignCard b {
  margin: 14px 0 0;
  max-width: 480px;
  font-family: "Hanken Grotesk";
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
}

.campaignCard.mainCampaign h2 {
  font-size: clamp(32px, 4vw, 52px);
}

.campaignCard p {
  max-width: 520px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .86);
  line-height: 1.45;
  font-weight: 500;
}

.socialProofStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 0 clamp(20px, 5vw, 64px) 34px;
  background: #f7f7f7;
}

.socialProofStrip div {
  background: #fff;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  padding: 20px;
}

.socialProofStrip strong,
.socialProofStrip span {
  display: block;
}

.socialProofStrip strong {
  color: #171717;
  font-size: 16px;
  margin-bottom: 7px;
}

.socialProofStrip span {
  color: #696969;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

.disciplineSection,
.featuredHome,
.homeGuideSection {
  padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--home-surface);
}

.homeSectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.homeSectionHead p {
  margin: 0 0 7px;
  color: var(--home-muted);
  font-size: 13px;
}

.homeSectionHead h2 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.homeSectionHead a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #171717;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
}

.disciplineGrid {
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  grid-template-rows: 250px 250px;
  gap: 24px;
}

.disciplineCard {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .78)), var(--image);
  background-position: center;
  background-size: cover;
}

.disciplineCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, .16), transparent 42%);
}

.disciplineCard > * {
  position: relative;
  z-index: 1;
}

.disciplineCard.large {
  grid-row: 1 / 3;
}

.disciplineCard span {
  text-transform: uppercase;
  font-size: 24px;
  font-family: "Hanken Grotesk";
  font-weight: 900;
}

.disciplineCard p {
  max-width: 520px;
  margin: 10px 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  font-weight: 500;
}

.disciplineCard b {
  align-self: flex-start;
  background: #fff;
  color: #111;
  border-radius: 5px;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

.kitAssistant {
  display: grid;
  grid-template-columns: 1fr .95fr;
  align-items: center;
  gap: 64px;
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 64px);
  background: linear-gradient(110deg, #f3f3f3 0%, #f7f9ff 58%, #f7f7f7 100%);
}

.assistantCopy small {
  display: inline-flex;
  background: #2b2b2b;
  color: var(--home-accent);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.assistantCopy h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1;
  margin: 18px 0;
  text-transform: uppercase;
  font-weight: 800;
  max-width: 620px;
}

.assistantCopy p {
  color: #555555;
  line-height: 1.6;
  max-width: 620px;
  font-weight: 500;
}

.homeKitBuilder {
  grid-template-columns: repeat(3, 1fr) auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 22px 0 0;
  gap: 12px;
}

.homeKitBuilder .kitStep {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--home-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.homeKitBuilder .kitStep label {
  color: #656565;
  letter-spacing: .08em;
}

.homeKitBuilder .kitStep select {
  height: 34px;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  border-radius: 0;
}

.homeKitBuilder .stitchBtn {
  align-self: stretch;
  height: auto;
  min-width: 160px;
}

.homeKitResult {
  grid-template-columns: 1fr;
  margin-top: 20px;
}

.homeKitResult .kitCard {
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(53,53,53, .07);
}

.assistantPreview {
  position: relative;
  min-height: 410px;
  max-width: 520px;
  justify-self: end;
  width: 100%;
  background: #fff;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 30px 70px rgba(44,44,44, .18);
  overflow: hidden;
}

.assistantPreview::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 0, 0, .18), transparent 70%);
  opacity: .7;
}

.matchScore {
  position: absolute;
  right: 34px;
  top: 28px;
  color: var(--home-accent-dark);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.floatingProduct {
  height: 230px;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.floatingProduct img {
  width: min(220px, 70%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: rotate(-12deg);
  box-shadow: 0 18px 32px rgba(0, 0, 0, .18);
}

.assistantPreview p {
  margin: 30px 0 7px;
  color: #6f6f6f;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .12em;
}

.assistantPreview h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.1;
}

.scoreLine {
  height: 4px;
  background: linear-gradient(90deg, var(--home-accent), #e4e4e4);
  border-radius: 999px;
  margin-top: 22px;
}

.featuredHome {
  background: #f7f7f7;
}

.filterChips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filterChips button {
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d6d6d6;
  background: #fff;
  padding: 0 14px;
  font-size: 12px;
}

.filterChips button.active {
  background: #171717;
  color: #fff;
  border-color: #171717;
}

.homeProductGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.homePerformance .productCard {
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.homePerformance .productCard:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

.homePerformance .productImage {
  height: auto;
  aspect-ratio: 1 / 1.08;
  border-radius: 8px;
  background: #e4e4e4;
  overflow: hidden;
}

.homePerformance .productImage img {
  border-radius: 8px;
  transition: transform .25s ease;
}

.homePerformance .productCard:hover .productImage img {
  transform: scale(1.035);
}

.homePerformance .badge {
  top: 10px;
  left: 10px;
  border-radius: 999px;
  background: var(--home-accent);
  color: #1c1c1c;
  font-size: 9px;
  letter-spacing: .08em;
  padding: 6px 9px;
}

.homePerformance .heart {
  right: 10px;
  top: 10px;
  bottom: auto;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}

.homePerformance .productInfo {
  padding: 14px 0 0;
}

.homePerformance .tags,
.homePerformance .installments {
  display: none;
}

.cardRating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #444;
  font-size: 12px;
  margin: 0 0 8px;
}

.ratingStars {
  color: #444;
  letter-spacing: 1px;
}

.homePerformance .sku {
  display: block;
  margin: 8px 0 0;
  color: #444;
  font-size: 11px;
  letter-spacing: .22em;
}

.homePerformance .stock {
  display: inline-block;
  margin-top: 8px;
  color: #444;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.sizePreview {
  margin-top: 10px;
  color: #383838;
  font-size: 12px;
  font-weight: 800;
}

.homePerformance .stringBox {
  display: block;
  margin-top: 14px;
  border-radius: 14px;
  background: #f8f8f8;
  border-color: #e2e2e2;
}

.homePerformance .stringBox label {
  display: flex;
  justify-content: space-between;
  color: #050505;
  font-size: 14px;
  font-weight: 900;
}

.homePerformance .stringBox input[type="range"] {
  accent-color: var(--home-accent);
}

.homePerformance .stringBox select {
  height: 42px;
  border-radius: 10px;
  font-size: 13px;
}

.homePerformance .productInfo h3 {
  font-size: 16px;
  line-height: 1.25;
  min-height: 42px;
  margin-bottom: 8px;
  font-weight: 800;
}

.homePerformance .price {
  font-size: 16px;
}

.homePerformance .cardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.homePerformance .cardActions button {
  height: 38px;
  border-radius: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.homePerformance .cardActions button:first-child {
  background: #fff;
  color: #171717;
  border: 1px solid #171717;
}

.homePerformance .cardActions button:last-child {
  width: auto;
  background: #08090d;
  color: #fff;
}

.loadMoreWrap {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.homeGuideSection {
  background: #fff;
}

.homeGuideGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.homeGuideGrid article {
  min-height: 230px;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  padding: 26px;
  background: #f7f7f7;
}

.homeGuideGrid span {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #171717;
  color: var(--home-accent);
  margin-bottom: 22px;
}

.homeGuideGrid h3 {
  margin: 0 0 12px;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1;
}

.homeGuideGrid p {
  margin: 0;
  color: #606060;
  line-height: 1.55;
  font-weight: 500;
}

.homeBottomBar {
  display: none;
}

.homeFooter {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 82px clamp(20px, 5vw, 64px) 96px;
  background: #e4e4e4;
  border-top: 1px solid rgba(23,23,23, .08);
  color: #2f2f2f;
}

.homeFooter img {
  width: 84px;
  height: auto;
  object-fit: contain;
  margin-bottom: 22px;
}

.homeFooter p {
  color: #5e5e5e;
  line-height: 1.6;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 18px;
}

.homeFooter h4 {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .14em;
  margin: 0 0 20px;
}

.homeFooter a {
  display: block;
  color: #5e5e5e;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.newsletter {
  display: flex;
  align-items: center;
}

.newsletter input {
  height: 42px;
  border: 1px solid #cdcdcd;
  background: #fff;
  border-radius: 6px 0 0 6px;
  padding: 0 14px;
  min-width: 0;
  width: 100%;
}

.newsletter button {
  height: 42px;
  width: 46px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--home-accent-dark);
  color: #fff;
}

.homePerformance .drawer {
  border-radius: 24px 0 0 24px;
}

.homePerformance .close {
  background: #171717;
  color: #fff;
}

@media (max-width: 1050px) {
  .homeNav {
    gap: 16px;
  }

  .homeNav nav {
    gap: 20px;
  }

  .searchPill {
    min-width: 200px;
  }

  .disciplineGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .campaignSection,
  .socialProofStrip,
  .homeGuideGrid {
    grid-template-columns: 1fr 1fr;
  }

  .campaignCard.mainCampaign {
    grid-column: 1 / -1;
  }

  .disciplineCard.large {
    grid-row: auto;
    min-height: 460px;
  }

  .disciplineCard {
    min-height: 260px;
  }

  .kitAssistant {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .assistantPreview {
    justify-self: start;
  }

  .homeKitBuilder {
    grid-template-columns: 1fr 1fr;
  }

  .homeKitBuilder .stitchBtn {
    height: 48px;
  }

  .homeProductGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeFooter {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .homeNav {
    height: 64px;
    padding: 0 16px;
  }

  .homeBrand img {
    width: 92px;
    height: 44px;
  }

  .homeMenu {
    display: grid;
    place-items: center;
    order: 2;
    margin-left: auto;
  }

  .homeNav nav {
    display: none;
  }

  .homeNav nav.open {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--home-line);
    padding: 8px 20px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .homeNav nav.open a {
    padding: 12px 0;
  }

  .navItem {
    height: auto;
    display: block;
  }

  .megaMenu {
    position: static;
    display: none;
    grid-template-columns: 1fr;
    padding: 14px 0 0 14px;
    box-shadow: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .navItem:hover .megaMenu,
  .navItem:focus-within .megaMenu,
  .navItem.megaOpen .megaMenu {
    display: grid;
  }

  .megaPromo {
    display: none;
  }

  .homeActions {
    order: 3;
  }

  .homeActions .searchPill,
  .homeActions button:not(.cartIcon) {
    display: none !important;
  }

  .stitchHero {
    min-height: 760px;
    padding-top: 64px;
  }

  .stitchHeroContent h1 {
    font-size: 44px;
  }

  .stitchHeroContent p {
    font-size: 15px;
  }

  .benefitStrip {
    grid-template-columns: 1fr;
    padding: 12px 20px;
    gap: 6px;
  }

  .benefitStrip div {
    justify-content: flex-start;
  }

  .homeSectionHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .disciplineSection,
  .featuredHome,
  .kitAssistant,
  .homeGuideSection {
    padding: 62px 20px;
  }

  .campaignSection {
    grid-template-columns: 1fr;
    padding: 42px 20px 16px;
  }

  .socialProofStrip,
  .homeGuideGrid {
    grid-template-columns: 1fr;
    padding-left: 20px;
    padding-right: 20px;
  }

  .disciplineGrid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .disciplineCard,
  .disciplineCard.large {
    min-height: 260px;
  }

  .homeKitBuilder {
    grid-template-columns: 1fr;
  }

  .assistantPreview {
    min-height: 360px;
    padding: 26px;
  }

  .homeProductGrid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .homePerformance .productInfo h3 {
    font-size: 14px;
  }

  .homePerformance .cardActions button:first-child {
    font-size: 10px;
  }

  .homeFooter {
    grid-template-columns: 1fr;
    padding-bottom: 100px;
  }

  .homeBottomBar {
    position: fixed;
    z-index: 55;
    bottom: 0;
    left: 0;
    right: 0;
    height: 66px;
    background: rgba(255, 255, 255, .94);
    border-top: 1px solid var(--home-line);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    backdrop-filter: blur(14px);
  }

  .homeBottomBar a {
    display: grid;
    place-items: center;
    color: #343434;
    gap: 2px;
  }

  .homeBottomBar small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #343434;
  }
}

@media (max-width: 480px) {
  .homeProductGrid {
    grid-template-columns: 1fr;
  }

  .heroCtas .stitchBtn {
    width: 100%;
  }

  .filterChips button {
    font-size: 11px;
  }

  .assistantPreview {
    display: none;
  }
}

/* Ajustes finais: fotos coloridas, menu premium e marcas em carrossel automÃ¡tico. */
.homeNav {
  padding-inline: clamp(18px, 3vw, 42px);
}

.homeNav nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 18px;
}

.homeNav nav::-webkit-scrollbar {
  display: none;
}

.homeNav nav .navItem > a,
.homeNav nav > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.menuTrigger .material-symbols-outlined {
  font-size: 20px;
}

.searchPill {
  min-width: 220px;
}

.storeMega {
  grid-template-columns: repeat(3, minmax(220px, 1fr)) minmax(230px, .7fr);
  gap: 34px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.megaColumn h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #dadada;
  padding-bottom: 12px;
}

.megaColumn h3 .material-symbols-outlined {
  font-size: 22px;
}

.megaColumn a {
  display: grid !important;
  grid-template-columns: 38px 1fr;
  gap: 4px 12px;
  align-items: center;
  margin: 0 0 12px !important;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-transform: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.megaColumn a:hover {
  background: #f3f3f3;
  border-color: #d9d9d9;
  transform: translateX(2px);
}

.megaColumn a > .material-symbols-outlined {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 21px;
}

.megaColumn a b {
  color: #111;
  font-size: 15px;
  line-height: 1.15;
}

.megaColumn a small {
  grid-column: 2;
  color: #626262;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.megaFeature {
  min-height: 250px;
  border-radius: 12px;
  background: #f2f2f2;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.megaFeature img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 18px;
}

.megaFeature strong {
  color: #111;
  font-family: "Hanken Grotesk", Inter, Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}

.megaFeature p {
  margin: 10px 0 0;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.racketLevelMega {
  left: 50%;
  right: auto;
  width: min(820px, calc(100vw - 48px));
  transform: translate(-50%, -8px);
  grid-template-columns: 1fr repeat(3, minmax(160px, 1fr));
  gap: 18px;
}

.navItem:hover .racketLevelMega,
.navItem:focus-within .racketLevelMega,
.navItem.megaOpen .racketLevelMega {
  transform: translate(-50%, 0);
}

.racketLevelHead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #e0e0e0;
  padding-right: 18px;
}

.racketLevelHead h3 {
  margin: 0 0 6px;
  font-size: 38px;
  letter-spacing: .1em;
  text-transform: none;
}

.racketLevelHead p {
  margin: 0;
  color: #555;
  font-size: 15px;
}

.racketLevelMega > a {
  display: grid !important;
  gap: 8px;
  min-height: 150px;
  padding: 18px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  text-transform: none !important;
}

.racketLevelMega > a:hover {
  background: #f1f1f1;
  border-color: #bdbdbd;
}

.racketLevelMega > a .material-symbols-outlined {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111;
  color: #fff;
}

.racketLevelMega > a b {
  color: #111;
  font-size: 18px;
}

.racketLevelMega > a small {
  color: #555;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.categoryTile img,
.homePerformance .productImage img,
.splitBanners a {
  filter: none;
}

.brandCarousel {
  position: relative;
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

.brandCarousel::before,
.brandCarousel::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 110px;
  pointer-events: none;
}

.brandCarousel::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}

.brandCarousel::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}

.brandTrack {
  display: flex;
  align-items: center;
  gap: clamp(54px, 7vw, 110px);
  width: max-content;
  animation: brandMarquee 28s linear infinite;
}

.brandCarousel:hover .brandTrack {
  animation-play-state: paused;
}

.brandTrack span {
  min-width: 140px;
  color: #111;
  font-family: "Hanken Grotesk", Inter, Arial, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  font-style: italic;
  opacity: .78;
  text-align: center;
  white-space: nowrap;
  filter: grayscale(1);
}

.brandDots i {
  animation: dotPulse 2.4s infinite ease-in-out;
}

.brandDots i:nth-child(2) {
  animation-delay: .25s;
}

.brandDots i:nth-child(3) {
  animation-delay: .5s;
}

@keyframes brandMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes dotPulse {
  0%, 100% {
    opacity: .35;
    transform: scale(.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (max-width: 1160px) {
  .homeActions .searchPill {
    display: none !important;
  }

  .storeMega {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .brandCarousel::before,
  .brandCarousel::after {
    width: 48px;
  }

  .brandTrack {
    gap: 44px;
    animation-duration: 22s;
  }

  .brandTrack span {
    min-width: 110px;
  }
}

/* Layout principal inspirado na referÃªncia HIT: claro, preto e cinza. */
.homePerformance {
  --home-accent: #111111;
  --home-accent-dark: #333333;
  --home-ink: #101010;
  --home-muted: #4a4a4a;
  --home-line: #dedede;
  --home-surface: #ffffff;
  --home-card: #ffffff;
  background: #ffffff;
  font-size: 17px;
}

.homeNav {
  height: 62px;
  background: #eeeeee;
  border-bottom: 1px solid #d7d7d7;
  box-shadow: none;
}

.homeBrand img {
  width: 64px;
  height: 48px;
  background: #111;
  padding: 2px;
}

.homeNav nav {
  gap: 30px;
}

.homeNav nav .navItem > a,
.homeNav nav > a {
  color: #070707;
  font-size: 14px;
  font-weight: 900;
  padding: 22px 0 18px;
}

.homeNav nav .navItem > a:hover,
.homeNav nav .navItem > a.active,
.homeNav nav > a:hover,
.homeNav nav > a.active {
  border-bottom-color: #111;
}

.searchPill {
  height: 38px !important;
  background: #fff !important;
  border-color: #d2d2d2 !important;
  color: #545454 !important;
  font-size: 13px;
}

.cartIcon b {
  background: #111;
  color: #fff;
}

.megaMenu {
  top: 62px;
}

.megaMenu div a:hover,
.megaPromo strong {
  color: #111;
}

.stitchHero {
  min-height: 520px;
  padding-top: 62px;
  background: #1e1e1e;
}

.stitchHeroVideo {
  filter: grayscale(1) contrast(1.08) brightness(.58);
}

.stitchHeroShade {
  background: rgba(0, 0, 0, .18);
}

.stitchHeroContent {
  width: min(720px, calc(100% - 40px));
  margin-top: 10px;
}

.stitchHeroContent h1 {
  color: #fff;
  font-size: clamp(52px, 7.5vw, 86px);
  line-height: .88;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}

.stitchHeroContent h1 span {
  color: #cfcfcf;
}

.stitchHeroContent p {
  color: #f0f0f0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 700;
}

.stitchBtn {
  height: 44px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: .08em;
}

.stitchBtn.primary,
.stitchBtn.darkText {
  background: #777;
  border-color: #777;
  color: #fff;
  box-shadow: none;
}

.stitchBtn.secondary {
  background: #444;
  border-color: #444;
  color: #fff;
}

.scrollCue {
  color: #e9e9e9;
}

.benefitStrip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(34px, 4.8vw, 86px);
  min-height: 118px;
  background: #d8d8d8;
  color: #111;
  padding: 0 clamp(44px, 7vw, 118px);
}

.benefitStrip div {
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 20px;
  text-transform: none;
  min-width: 0;
}

.benefitStrip .material-symbols-outlined {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #111;
  font-size: 30px;
}

.benefitStrip strong {
  display: block;
  color: #111;
  font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.15;
  font-weight: 900;
  max-width: 270px;
}

.benefitStrip small {
  display: block;
  margin-top: 5px;
  color: #222;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.categoryShowcase {
  position: relative;
  padding: 46px clamp(36px, 8vw, 130px) 34px;
  background: #fff;
}

.categoryTiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.categoryTile {
  display: grid;
  gap: 18px;
  text-align: center;
}

.categoryTile img {
  width: 100%;
  aspect-ratio: .76 / 1;
  object-fit: cover;
  background: #efefef;
  filter: grayscale(1);
}

.categoryTile strong {
  color: #111;
  text-transform: uppercase;
  font-family: "Hanken Grotesk", Inter, Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.carouselArrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 58px;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
}

.carouselArrow.left {
  left: clamp(12px, 4vw, 78px);
}

.carouselArrow.right {
  right: clamp(12px, 4vw, 78px);
}

.featuredHome,
.offersSection,
.brandsSection,
.homeGuideSection {
  background: #fff;
  padding: 58px clamp(36px, 8vw, 130px);
}

.centeredHead {
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
}

.homeSectionHead h2,
.brandsSection h2,
.offersSection h2,
.homeGuideSection .homeSectionHead h2,
.signupBand h2 {
  color: #101010;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 900;
}

.homeGuideSection .homeSectionHead p {
  color: #4a4a4a;
  font-size: 16px;
  font-weight: 800;
}

.filterChips,
.homePerformance .tags,
.homePerformance .stock,
.homePerformance .sku {
  display: none;
}

.homeProductGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 46px 34px;
}

.homePerformance .productCard {
  text-align: center;
}

.homePerformance .productImage {
  aspect-ratio: 1 / 1.02;
  border-radius: 0;
  background: #f1f1f1;
}

.homePerformance .productImage img {
  border-radius: 0;
  object-fit: contain;
  padding: 16px;
  filter: grayscale(1);
}

.homePerformance .productCard:hover .productImage img {
  transform: scale(1.02);
}

.homePerformance .badge {
  left: 0;
  top: 0;
  border-radius: 0;
  background: #555;
  color: #fff;
  font-size: 11px;
  padding: 5px 8px;
}

.homePerformance .heart,
.cardRating {
  display: none;
}

.homePerformance .productInfo {
  padding-top: 12px;
}

.homePerformance .productInfo h3 {
  min-height: 46px;
  color: #333333;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.homePerformance .price {
  color: #111;
  font-size: 27px;
  font-weight: 900;
}

.homePerformance .installments {
  display: block;
  color: #444;
  font-size: 14px;
  line-height: 1.35;
}

.homeCardSelect {
  width: 100%;
  height: 32px;
  margin-top: 14px;
  border: 0;
  border-radius: 2px;
  background: #e4e4e4;
  color: #333;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.homeBuyControls {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px;
  margin-top: 7px;
}

.qtyMini {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  background: #e4e4e4;
  border-radius: 2px;
  overflow: hidden;
}

.qtyMini button,
.qtyMini input,
.homeBuyControls > button {
  min-width: 0;
  height: 36px;
  border: 0;
  background: transparent;
  color: #333;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.qtyMini input {
  width: 100%;
}

.homeBuyControls > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 2px;
  background: #8a8a8a;
  color: #fff;
  text-transform: none;
}

.homeBuyControls > button .material-symbols-outlined {
  font-size: 17px;
}

.brandsSection {
  text-align: center;
  padding-top: 78px;
}

.brandsSection h2,
.offersSection h2 {
  margin: 0 0 34px;
  font-size: 26px;
  text-transform: none;
}

.brandStrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 34px;
}

.brandStrip span {
  color: #111;
  font-family: "Hanken Grotesk", Inter, Arial, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  font-style: italic;
  opacity: .72;
  filter: grayscale(1);
}

.brandDots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.brandDots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #999;
}

.offersSection {
  text-align: center;
}

.offersSection .homeProductGrid {
  gap: 28px;
}

.splitBanners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 44px clamp(36px, 8vw, 130px) 70px;
  background: #fff;
}

.splitBanners a {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 14px;
  padding: 36px 44px;
  color: #fff;
  background-image: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.64)), var(--image);
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
}

.splitBanners span {
  font-size: 17px;
  font-weight: 800;
}

.splitBanners strong {
  margin: 8px 0 22px;
  font-family: "Hanken Grotesk", Inter, Arial, sans-serif;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

.splitBanners em {
  width: fit-content;
  border-radius: 999px;
  background: #797979;
  padding: 9px 24px;
  color: #fff;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.homeGuideGrid article {
  background: #f7f8fb;
}

.homeGuideGrid span {
  width: 56px;
  height: 56px;
  background: #171717;
  color: #e6e6e6;
  font-size: 31px;
}

.homeGuideGrid h3 {
  color: #101010;
  font-size: 25px;
}

.homeGuideGrid p {
  color: #4a4a4a;
  font-size: 18px;
}

.signupBand {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 34px;
  align-items: center;
  padding: 42px clamp(36px, 8vw, 130px);
  background: #8f8f8f;
  color: #111;
}

.signupBand h2 {
  margin: 0 0 8px;
  text-transform: uppercase;
}

.signupBand p {
  margin: 0;
  color: #222;
  font-size: 16px;
}

.signupBand form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}

.signupBand input {
  height: 42px;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: #fff;
}

.signupBand button {
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #555;
  color: #fff;
  padding: 0 24px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
}

.signupBand form > span {
  color: #fff;
  font-weight: 800;
}

.signupBand form > a {
  color: #111;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.homeFooter {
  background: #eeeeee;
  color: #111;
}

.homeFooter p,
.homeFooter a {
  color: #555;
  font-size: 16px;
}

.newsletter button {
  background: #333;
}

@media (max-width: 1050px) {
  .benefitStrip,
  .categoryTiles,
  .homeProductGrid,
  .brandStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signupBand,
  .splitBanners {
    grid-template-columns: 1fr;
  }

  .signupBand form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .homeNav {
    height: 64px;
  }

  .homeBrand img {
    width: 58px;
    height: 44px;
  }

  .stitchHero {
    min-height: 620px;
  }

  .stitchHeroContent h1 {
    font-size: 48px;
  }

  .stitchHeroContent p {
    font-size: 17px;
  }

  .benefitStrip,
  .categoryTiles,
  .homeProductGrid,
  .brandStrip,
  .homeGuideGrid {
    grid-template-columns: 1fr;
  }

  .benefitStrip {
    padding: 22px;
  }

  .categoryShowcase,
  .featuredHome,
  .offersSection,
  .brandsSection,
  .homeGuideSection,
  .splitBanners,
  .signupBand {
    padding-left: 22px;
    padding-right: 22px;
  }

  .carouselArrow {
    display: none;
  }
}

.categoryTile img,
.homePerformance .productImage img,
.splitBanners a {
  filter: none !important;
}

/* Ajuste solicitado: logo maior e faixa de vantagens sem texto auxiliar. */
.homeBrand img {
  width: 104px !important;
  height: 50px !important;
  background: transparent !important;
  padding: 0 !important;
  object-fit: contain;
}

.stitchHero {
  place-items: center;
}

.stitchHeroContent {
  width: min(760px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  text-align: center !important;
  transform: none !important;
}

.benefitStrip {
  min-height: 92px !important;
  gap: 0;
}

.benefitStrip div {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 14px;
}

.benefitStrip small {
  display: none !important;
}

.benefitStrip strong {
  max-width: 270px;
  font-size: 18px !important;
}

.homeGuideGrid .guideIcon {
  width: 72px !important;
  height: 72px !important;
  padding: 5px;
  overflow: hidden;
  background: #171717 !important;
  border: 2px solid #171717;
}

.homeGuideGrid .guideIcon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.homeGuideGrid article {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-height: 260px;
  overflow: hidden;
}

.homeGuideGrid .guideThumb {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  margin: 0 0 20px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

.homeGuideGrid .guideThumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

.homeGuideGrid h3 {
  width: 100%;
  margin: 0 0 12px !important;
  font-size: clamp(20px, 1.8vw, 25px) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere;
}

.homeGuideGrid p {
  width: 100%;
  margin: 0 !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.52 !important;
}

@media (max-width: 760px) {
  .homeBrand img {
    width: 86px !important;
    height: 42px !important;
  }

  .benefitStrip {
    min-height: 0 !important;
  }

  .homeGuideGrid article {
    min-height: auto;
  }
}

/* Cabecalho final no estilo loja premium: faixa animada, logo maior e menu por categorias. */
.homePerformance .homeNav {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  background: #f4f4f4 !important;
  border-bottom: 0 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08) !important;
  backdrop-filter: none !important;
}

.topPromoMarquee {
  height: 40px;
  overflow: hidden;
  background: #111111;
  color: #ffffff;
  border-bottom: 1px solid #2b2b2b;
}

.topPromoTrack {
  height: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.6vw, 58px);
  padding: 0 28px;
  animation: topPromoMarquee 30s linear infinite;
}

.topPromoMarquee:hover .topPromoTrack {
  animation-play-state: paused;
}

.topPromoTrack span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.topPromoTrack i.material-symbols-outlined {
  color: #ffffff;
  font-size: 22px;
  font-style: normal;
  font-variation-settings: "FILL" 1;
}

.homeHeaderMain {
  height: 96px;
  display: grid;
  grid-template-columns: minmax(112px, 160px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 52px);
  padding: 0 clamp(22px, 6vw, 96px);
  background: #eeeeee;
}

.homePerformance .homeBrand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.homePerformance .homeBrand img {
  width: 132px !important;
  height: 86px !important;
  max-width: 100%;
  display: block;
  object-fit: contain;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.homeHeaderMain .searchPill {
  width: 100%;
  min-width: 0 !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 20px !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #232323 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.homeHeaderMain .searchPill .material-symbols-outlined {
  font-size: 32px;
  color: #111111;
}

.homePerformance .homeActions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 1.7vw, 24px);
}

.homePerformance .homeActions button,
.homePerformance .homeActionLink {
  width: auto !important;
  min-width: 56px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #111111 !important;
  display: grid !important;
  place-items: center;
  align-content: center;
  gap: 2px;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.homePerformance .homeActions small,
.homePerformance .homeActionLink small {
  display: block;
  color: #111111;
  font-size: 12px;
  line-height: .94;
  font-weight: 800;
  white-space: nowrap;
}

.homePerformance .homeActions .material-symbols-outlined,
.homePerformance .homeActionLink .material-symbols-outlined {
  font-size: 31px;
  color: #111111;
}

.homePerformance .cartIcon b {
  right: 1px;
  top: 2px;
  min-width: 22px;
  height: 22px;
  background: #111111;
  color: #ffffff;
  border: 2px solid #eeeeee;
  font-size: 12px;
}

.homePerformance .homeMainNav {
  height: 56px;
  display: flex !important;
  align-items: center;
  gap: clamp(18px, 2.15vw, 38px) !important;
  padding: 0 clamp(22px, 6vw, 96px);
  overflow-x: auto;
  overflow-y: hidden;
  background: #111111;
  border-top: 1px solid #262626;
  scrollbar-width: none;
}

.homePerformance .homeMainNav::-webkit-scrollbar {
  display: none;
}

.homePerformance .homeMainNav .navItem {
  height: 56px !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.homePerformance .homeMainNav .navItem > a,
.homePerformance .homeMainNav > a {
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border-bottom: 3px solid transparent !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1;
  font-weight: 900 !important;
  text-decoration: none;
  white-space: nowrap;
}

.homePerformance .homeMainNav .navItem > a:hover,
.homePerformance .homeMainNav .navItem > a.active,
.homePerformance .homeMainNav > a:hover,
.homePerformance .homeMainNav > a.active {
  border-bottom-color: #ffffff !important;
  color: #ffffff !important;
}

.homePerformance .homeMainNav .material-symbols-outlined {
  color: #ffffff;
  font-size: 22px;
}

.homePerformance .megaMenu {
  top: 192px !important;
}

.homePerformance .stitchHero {
  padding-top: 192px !important;
}

@keyframes topPromoMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1120px) {
  .homeHeaderMain {
    grid-template-columns: 128px minmax(240px, 1fr) auto;
    gap: 22px;
    padding: 0 24px;
  }

  .homePerformance .homeBrand img {
    width: 112px !important;
    height: 78px !important;
  }

  .homePerformance .homeActions {
    gap: 14px;
  }

  .homePerformance .homeActions small,
  .homePerformance .homeActionLink small {
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .topPromoMarquee {
    height: 34px;
  }

  .topPromoTrack {
    gap: 34px;
    padding: 0 18px;
    animation-duration: 24s;
  }

  .topPromoTrack span {
    font-size: 13px;
  }

  .homeHeaderMain {
    height: 72px;
    grid-template-columns: 104px 1fr auto;
    gap: 10px;
    padding: 0 14px;
  }

  .homePerformance .homeBrand img {
    width: 96px !important;
    height: 64px !important;
  }

  .homeMenu {
    display: grid !important;
    grid-column: 3;
    grid-row: 1;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    margin-left: 0 !important;
    color: #111111 !important;
    background: transparent !important;
  }

  .homeHeaderMain .searchPill {
    display: none !important;
  }

  .homePerformance .homeActions {
    grid-column: 2;
    justify-content: end;
    gap: 10px;
    padding-right: 4px;
  }

  .homePerformance .homeActions button,
  .homePerformance .homeActionLink {
    min-width: 38px;
    height: 46px;
  }

  .homePerformance .homeActions small,
  .homePerformance .homeActionLink small {
    display: none;
  }

  .homePerformance .homeActions .material-symbols-outlined,
  .homePerformance .homeActionLink .material-symbols-outlined {
    font-size: 29px;
  }

  .homePerformance .homeMainNav {
    display: none !important;
  }

  .homePerformance .homeMainNav.open {
    position: absolute;
    top: 106px;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 106px);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0 !important;
    padding: 12px 20px 22px;
    overflow-y: auto;
    background: #111111;
    border-top: 1px solid #2a2a2a;
  }

  .homePerformance .homeMainNav.open .navItem {
    width: 100%;
    height: auto !important;
    display: block;
  }

  .homePerformance .homeMainNav.open .navItem > a,
  .homePerformance .homeMainNav.open > a {
    width: 100%;
    height: auto;
    padding: 13px 0 !important;
  }

  .homePerformance .megaMenu {
    top: auto !important;
  }

.homePerformance .stitchHero {
  padding-top: 106px !important;
}
}

/* Ajuste fino solicitado: topo mais compacto e faixa de beneficios com respiro uniforme. */
.homePerformance .topPromoTrack {
  gap: clamp(28px, 3.6vw, 58px) !important;
}

.homePerformance .homeActions {
  gap: clamp(14px, 1.7vw, 24px) !important;
}

.homePerformance .homeActions button,
.homePerformance .homeActionLink {
  gap: 2px !important;
  align-content: center !important;
}

.homePerformance .homeActions small,
.homePerformance .homeActionLink small {
  line-height: .94 !important;
}

.homePerformance .homeMainNav {
  gap: clamp(18px, 2.15vw, 38px) !important;
}

.homePerformance .benefitStrip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(34px, 4.8vw, 86px) !important;
  row-gap: 0 !important;
  padding-left: clamp(44px, 7vw, 118px) !important;
  padding-right: clamp(44px, 7vw, 118px) !important;
}

.homePerformance .benefitStrip div {
  gap: 20px !important;
  min-width: 0;
}

.homePerformance .benefitStrip strong {
  max-width: 270px;
  font-size: clamp(17px, 1.1vw, 20px) !important;
}

@media (max-width: 1050px) {
  .homePerformance .benefitStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 18px !important;
  }
}

@media (max-width: 760px) {
  .homePerformance .benefitStrip {
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
    padding: 22px !important;
  }
}

/* Refinamento final: letras juntas, respiro do hero e faixa cinza alinhada. */
.homePerformance .homeActions small,
.homePerformance .homeActionLink small {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.homePerformance .stitchHero {
  min-height: 560px !important;
  padding-top: 222px !important;
  padding-bottom: 30px !important;
}

.homePerformance .stitchHeroContent {
  margin-top: 18px !important;
}

.homePerformance .heroCtas {
  margin-bottom: 22px !important;
}

.homePerformance .stitchBtn {
  letter-spacing: .02em !important;
}

.homePerformance .benefitStrip {
  margin-top: 0 !important;
  min-height: 104px !important;
}

@media (max-width: 760px) {
  .homePerformance .homeActions small,
  .homePerformance .homeActionLink small {
    display: none !important;
  }

  .homePerformance .stitchHero {
    min-height: 620px !important;
    padding-top: 126px !important;
    padding-bottom: 24px !important;
  }
}

.cartQtyControls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cartQtyControls button {
  height: 32px;
  min-width: 32px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-weight: 900;
  padding: 0 10px;
}

.cartQtyControls span {
  min-width: 24px;
  text-align: center;
  font-weight: 900;
}

.cartQtyControls.compact {
  gap: 5px;
}

.cartQtyControls.compact button {
  height: 28px;
  min-width: 28px;
  font-size: 12px;
}

/* Carrinho lateral: contraste e leitura do botao principal. */
.homePerformance .drawer {
  color: #111;
}

.homePerformance .drawer h2 {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.1;
}

.homePerformance .drawer h3 {
  margin: 18px 0 12px;
  font-size: 18px;
  line-height: 1.2;
  color: #111;
}

.homePerformance .drawer .cartItem b,
.homePerformance .drawer .cartItem p,
.homePerformance .drawer .cartItem small {
  color: #111;
  letter-spacing: 0;
}

.homePerformance .drawer .cartItem small {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: #555;
  margin: 4px 0;
}

.homePerformance .cartCheckoutBtn {
  width: 100%;
  min-height: 54px;
  height: auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.1;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.homePerformance .cartCheckoutBtn:visited,
.homePerformance .cartCheckoutBtn:hover,
.homePerformance .cartCheckoutBtn:focus {
  color: #fff !important;
  background: #111 !important;
}

.homePerformance .drawerUpsell {
  display: grid;
  gap: 8px;
}

.homePerformance .drawerUpsell .btn {
  min-height: 44px;
  height: auto;
  color: #111;
  background: #fff;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.floatingWhatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.floatingWhatsapp .material-symbols-outlined {
  font-size: 24px;
}

.floatingWhatsapp strong {
  color: #fff;
  font-size: 14px;
}
