:root {
  --brand: #B68CCF; /* lilás */
}

/* ======= GERAL ======= */

.brand-text { letter-spacing: .08em; }

.hero {
  background: linear-gradient(180deg, rgba(182,140,207,.08), transparent);
}

.hero-card img {
  aspect-ratio: 4/3;
  object-fit: cover;
}

.card-product {
  transition: transform .18s ease, box-shadow .18s ease;
}

.card-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

.price { font-weight: 700; }

.badge-new { background: var(--brand); }

.badge-best {
  background: #111;
  color: #fff;
}

.size-pill { cursor: pointer; }

.size-pill input { display: none; }

.size-pill label {
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-weight: 600;
}

.size-pill input:checked + label {
  border-color: #111;
  background: #111;
  color: #fff;
}

footer { background: #faf8fb; }

/* ======= COLEÇÕES (CATEGORIAS) ======= */
.cat-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  color: #fff;
  padding: 24px;
  text-decoration: none;
  isolation: isolate;
  transition: transform .35s ease, box-shadow .35s ease;
}

.cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 60%);
  z-index: 0;
  transition: opacity .35s ease;
}

.cat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

.cat-tile .eyebrow {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  opacity: .85;
}

.cat-tile h3 {
  position: relative;
  z-index: 1;
  margin: 4px 0 0 0;
  font-weight: 700;
}

.cat-tile .cta {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  font-weight: 600;
  text-decoration: underline;
}

@media (min-width: 992px) {
  .cat-tile { padding: 28px; }
  .cat-tile h3 { font-size: 1.6rem; }
}

/* Filtros ativos */
.btn[data-filter].active,
.btn[data-filter]:focus {
  background:#111; color:#fff; border-color:#111;
}

/* Carrossel nos cards de produto */
.product-carousel .carousel-item img{
  aspect-ratio: 4/5;
  object-fit: cover;
}
.product-carousel .carousel-control-prev,
.product-carousel .carousel-control-next{
  width: 12%;
}
.product-carousel .carousel-control-prev-icon,
.product-carousel .carousel-control-next-icon{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.product-carousel .carousel-indicators [data-bs-target]{
  width:8px;height:8px;border-radius:50%;
}

.cart-item .cart-thumb{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.fitela-top-bar {
  overflow: hidden;
  background: #000;
  color: #fff;
  padding: 4px 0;
}

/* Container que anda */
.fitela-top-bar-scroll {
  display: inline-block;
  white-space: nowrap;
  animation: fitela-marquee 18s linear infinite;
}

/* Cada bloco de texto (você duplicou no HTML) */
.fitela-top-bar-track {
  display: inline-block;
  padding-right: 3rem; /* espaço entre a cópia */
}

.fitela-top-bar-track span {
  margin: 0 .5rem;
  font-size: 14px;
  letter-spacing: .05em;
}

/* Animação */
@keyframes fitela-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* FONTES SITE */

/* Corpo do site */
body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}

/* Títulos */
h1,
h2,
h3,
.titulo-principal {
  font-family: 'Avenir', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
}

/* Textos corridos */
p,
.texto-corpo,
.lead {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
}


/* STORYS */
.collections-stories {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
  margin-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.collections-stories::-webkit-scrollbar {
  display: none; /* some iOS/Chrome */
}

.story-pill {
  text-decoration: none;
  color: #333;
  text-align: center;
  flex: 0 0 auto;
}

.story-thumb {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid #eee;
  display: block;
  margin: 0 auto 0.35rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.story-label {
  font-size: 0.85rem;
  text-transform: lowercase;
  letter-spacing: .03em;
}

.story-pill:hover .story-thumb {
  transform: scale(1.06);
  border-color: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

@media (min-width: 992px) {
  .collections-stories {
    justify-content: center;
    overflow-x: visible;
    gap: 3rem; /* deixa mais espaçado */
  }
}

.card-product .size-pill label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  width: 100%;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #D4D4D4;
  background: #fff;
}

.size-pill-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .7;
}

.size-pill-range {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.size-pill input:checked + label {
  border-color: #111;
  background: #111;
  color: #fff;
}

.size-pill input:checked + label .size-pill-title {
  opacity: .85;
}


/* HERO bem simples: só o ativo aparece */
.fitela-hero-rotator-full {
  width: 100%;
  overflow: hidden;
}

/* cada slide some do layout por padrão */
.fitela-hero-slide {
  display: none;      /* <-- não ocupa espaço */
  width: 100%;
}

/* só o slide ativo aparece */
.fitela-hero-slide.active {
  display: block;     /* <-- ocupa espaço e é exibido */
}

/* imagem respeita o tamanho original */
.fitela-hero-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;  /* pode trocar pra 'cover' se quiser cortar um pouco */
}