/* =========================================================
   PRODUTO TAPETES — V2
   Todo o bloco vive dentro de .tapeteProduct (ou usa prefixo tpt*).
   Nada aqui pode alcançar Capas, Hero, Header, Footer, avaliações,
   modal genérico ou sticky CTA.
   Carregar sempre DEPOIS de css/style.css.
========================================================= */

.tapeteProduct{
  --tpt-ink:      #0B0F14;
  --tpt-muted:    #5B6472;
  --tpt-line:     rgba(15,23,42,.10);
  --tpt-accent:   #F5B301;
  --tpt-accent-d: #B88600;
  --tpt-soft:     #FFF8E6;
  --tpt-green:    #16a34a;
  --tpt-green-d:  #15803d;

  padding: 44px 0 24px;
  background: #fff;
  color: var(--tpt-ink);
}

@media (max-width: 768px){
  .tapeteProduct{ padding: 32px 0 20px; }
}

/* Mesma largura da coluna de compra das Capas (.cta__wrap = 420px),
   para os dois produtos ficarem visualmente consistentes no desktop. */
.tapeteProduct .tpt__wrap{
  max-width: 420px;
  margin: 0 auto;
  padding: 0 20px;
}

.tapeteProduct .tpt__title{
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
  position: relative;
  padding-bottom: 12px;
}

.tapeteProduct .tpt__title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: var(--tpt-accent);
}

.tapeteProduct .tpt__subtitle{
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: var(--tpt-muted);
}

/* ================= GALERIA ================= */

.tapeteProduct .tptGallery{ margin-top: 18px; }

.tapeteProduct .tptGallery__main{
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--tpt-line);
  border-radius: 18px;
  background: #F7F8FB;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 10px 26px rgba(2,6,23,.07);
}

.tapeteProduct .tptGallery__main img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tapeteProduct .tptGallery__thumbs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.tapeteProduct .tptGallery__thumbs::-webkit-scrollbar{ display: none; }

.tapeteProduct .tptGallery__thumb{
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 2px solid var(--tpt-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s ease, transform .15s ease;
}

.tapeteProduct .tptGallery__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tapeteProduct .tptGallery__thumb.is-active{
  border-color: var(--tpt-accent);
  transform: translateY(-1px);
}

/* ================= KITS ================= */

.tapeteProduct .tptKit__note{
  margin-top: 22px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tpt-accent-d);
  background: var(--tpt-soft);
  border: 1px solid rgba(245,179,1,.30);
  border-radius: 999px;
  padding: 7px 14px;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.tapeteProduct .tptKit__head{ margin-top: 18px; text-align: center; }

.tapeteProduct .tptKit__title{
  font-size: clamp(18px, 4.4vw, 22px);
  font-weight: 900;
  line-height: 1.25;
}

.tapeteProduct .tptKit__sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--tpt-muted);
}

/* Kits sempre empilhados — a coluna tem 420px, igual à das Capas */
.tapeteProduct .tptKit__grid{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.tapeteProduct .tptKitCard{
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 12px;
  text-align: left;
  border: 2px solid var(--tpt-line);
  border-radius: 16px;
  background: #fff;
  color: var(--tpt-ink);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tapeteProduct .tptKitCard:hover{
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
  transform: translateY(-1px);
}

.tapeteProduct .tptKitCard.is-selected{
  border-color: var(--tpt-accent);
  background: #FFFDF6;
}

.tapeteProduct .tptKitCard:focus-visible{
  outline: 3px solid rgba(245,179,1,.35);
  outline-offset: 2px;
}

.tapeteProduct .tptKitCard__badge{
  position: absolute;
  top: -9px;
  right: 12px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tpt-accent);
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1;
}

.tapeteProduct .tptKitCard__badge--soft{
  color: var(--tpt-accent-d);
  background: var(--tpt-soft);
  border: 1px solid rgba(245,179,1,.40);
}

.tapeteProduct .tptKitCard__thumb{
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F4F8;
}

.tapeteProduct .tptKitCard__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tapeteProduct .tptKitCard__mid{ display: block; min-width: 0; }

.tapeteProduct .tptKitCard__eyebrow{
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--tpt-muted);
  text-transform: uppercase;
}

.tapeteProduct .tptKitCard__name{
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--tpt-ink);
}

.tapeteProduct .tptKitCard__save{
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--tpt-green-d);
  background: rgba(22,163,74,.10);
  border-radius: 999px;
  padding: 3px 8px;
}

.tapeteProduct .tptKitCard__right{ text-align: right; }

.tapeteProduct .tptKitCard__old{
  display: block;
  font-size: 11px;
  color: var(--tpt-muted);
  text-decoration: line-through;
}

.tapeteProduct .tptKitCard__now{
  display: block;
  font-size: 17px;
  font-weight: 900;
  color: var(--tpt-green-d);
  line-height: 1.15;
}

@media (max-width: 380px){
  .tapeteProduct .tptKitCard{ grid-template-columns: 52px minmax(0,1fr) auto; gap: 9px; padding: 13px 10px; }
  .tapeteProduct .tptKitCard__thumb{ width: 52px; height: 52px; }
  .tapeteProduct .tptKitCard__name{ font-size: 13px; }
  .tapeteProduct .tptKitCard__now{ font-size: 16px; }
}

/* ================= PAINEL DE VEÍCULO ================= */

.tapeteProduct .tptPanel{
  margin-top: 20px;
  padding: 18px 16px;
  border: 1px solid var(--tpt-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(2,6,23,.07);
}

.tapeteProduct .tptPanel__title{
  font-size: clamp(17px, 4.2vw, 21px);
  font-weight: 900;
  line-height: 1.25;
}

.tapeteProduct .tptPanel__accent{ color: var(--tpt-accent); }

.tapeteProduct .tptPanel__sub{
  margin-top: 4px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--tpt-muted);
}

.tapeteProduct .tptField{
  margin-bottom: 12px;
  opacity: 1;
  max-height: 260px;
  transform: translateY(0);
  overflow: visible;
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease;
}

.tapeteProduct .tptField.is-hidden{
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  transform: translateY(-6px);
  overflow: hidden;
  pointer-events: none;
}

.tapeteProduct .tptField label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--tpt-ink);
}

.tapeteProduct .tptStepNum{
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--tpt-muted);
  background: #EEF1F6;
  flex: 0 0 auto;
}

.tapeteProduct .tptField.is-active .tptStepNum{
  color: #fff;
  background: var(--tpt-accent);
}

.tapeteProduct .tptField.is-done .tptStepNum{
  color: #fff;
  background: var(--tpt-green);
}

.tapeteProduct .tptStepCheck{
  opacity: 0;
  font-size: 13px;
  font-weight: 900;
  color: var(--tpt-green);
  transition: opacity .2s ease;
}

.tapeteProduct .tptField.is-done .tptStepCheck{ opacity: 1; }

.tapeteProduct .tptField select{
  width: 100%;
  height: 48px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--tpt-ink);
  background: #fff;
  border: 1.5px solid var(--tpt-line);
  border-radius: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.tapeteProduct .tptField.is-active select{
  border-color: var(--tpt-accent);
  box-shadow: 0 0 0 3px rgba(245,179,1,.14);
}

.tapeteProduct .tptField select:focus{
  outline: none;
  border-color: var(--tpt-accent);
  box-shadow: 0 0 0 3px rgba(245,179,1,.20);
}

.tapeteProduct .tptField select:disabled{
  background-color: #F5F6F9;
  color: #9AA3B0;
  cursor: not-allowed;
}

/* ----- cores ----- */

.tapeteProduct .tptColors{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 4px 0 2px;
}

.tapeteProduct .tptColorOpt{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tapeteProduct .tptColorBtn{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.14);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tapeteProduct .tptColorBtn:hover{ transform: scale(1.06); }

.tapeteProduct .tptColorBtn--preto{ background: #111111; }
.tapeteProduct .tptColorBtn--cinza{ background: #5a5a5a; }
.tapeteProduct .tptColorBtn--bege { background: #C8AD7F; }

.tapeteProduct .tptColorBtn.is-selected{
  border-color: var(--tpt-accent);
  box-shadow: 0 0 0 3px rgba(245,179,1,.30);
}

.tapeteProduct .tptColorBtn.is-selected::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.tapeteProduct .tptColorBtn:focus-visible{
  outline: 3px solid rgba(245,179,1,.35);
  outline-offset: 2px;
}

.tapeteProduct .tptColorOpt__name{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tpt-muted);
}

/* ----- resultado ----- */

.tapeteProduct .tptResult{ display: none; margin-top: 4px; }

.tapeteProduct .tptResult__ok{
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #14532d;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.28);
}

/* ================= PREÇO + CTA ================= */

.tapeteProduct .tptPrice{
  margin-top: 18px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--tpt-line);
  border-radius: 18px;
  background: #FCFDFE;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}

.tapeteProduct .tptPrice__compare{
  font-size: 13px;
  color: var(--tpt-muted);
}

.tapeteProduct .tptPrice__compare span{ text-decoration: line-through; }

.tapeteProduct .tptPrice__main{
  margin-top: 2px;
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tpt-green-d);
}

.tapeteProduct .tptPrice__kit{
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tpt-muted);
}

.tapeteProduct .tptBuy{
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 17px 18px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
  color: #fff;
  background: var(--tpt-green);
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(22,163,74,.26);
  transition: filter .15s ease, transform .12s ease;
}

.tapeteProduct .tptBuy:hover{ filter: brightness(1.05); }
.tapeteProduct .tptBuy:active{ transform: scale(.99); }

.tapeteProduct .tptBuy:focus-visible{
  outline: 3px solid rgba(22,163,74,.30);
  outline-offset: 3px;
}

.tapeteProduct .tptBuy__sub{
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  opacity: .9;
  letter-spacing: 0;
}

.tapeteProduct .tptCombo{
  margin-top: 12px;
  padding: 11px 13px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #14532d;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.28);
  border-radius: 12px;
}

.tapeteProduct .tptCombo[hidden]{ display: none; }

/* =========================================================
   TEXTURAS — vivem dentro do modal (#orderTapete),
   por isso ficam fora de .tapeteProduct. Prefixo tptTx.
========================================================= */

#orderTapete .tptTx{
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: #FCFDFE;
}

#orderTapete .tptTx__title{
  font-size: 13.5px;
  font-weight: 900;
  color: #0B0F14;
}

#orderTapete .tptTx__sub{
  margin-top: 3px;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #5B6472;
}

#orderTapete .tptTx__row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#orderTapete .tptTx__opt{
  border: 2px solid rgba(15,23,42,.10);
  border-radius: 12px;
  padding: 6px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, transform .12s ease;
}

#orderTapete .tptTx__opt:hover{ transform: translateY(-1px); }

#orderTapete .tptTx__opt.is-active{
  border-color: #F5B301;
  background: #FFFDF6;
}

#orderTapete .tptTx__media{
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: #F2F4F8;
}

#orderTapete .tptTx__media img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#orderTapete .tptTx__check{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #F5B301;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s ease, transform .15s ease;
}

#orderTapete .tptTx__opt.is-active .tptTx__check{ opacity: 1; transform: scale(1); }

#orderTapete .tptTx__name{
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #0B0F14;
}

#orderTapete .tptTx__zoom{
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(245,179,1,.40);
  border-radius: 999px;
  background: #FFF8E6;
  color: #8a6400;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

#orderTapete .tptTx__zoom:hover{ background: #F5B301; color: #fff; }

@media (max-width: 340px){
  #orderTapete .tptTx__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   TEXTURA OBRIGATÓRIA — estado de erro inline (sem alert)
========================================================= */
.tptTx.is-invalid{
  border: 1px solid rgba(245,179,1,.55);
  background: rgba(245,179,1,.06);
  border-radius: 12px;
  padding: 12px;
}
.tptTx.is-invalid .tptTx__opt .tptTx__media{
  outline: 1px solid rgba(245,179,1,.35);
  outline-offset: 2px;
}
.tptTx__erro{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #B88600;
}

/* =========================================================
   VÍDEOS DENTRO DO BLOCO DE PRODUTO
   #veja-na-pratica passou para dentro de .tpt__wrap (que tem
   coluna estreita). Sem isto os 3 cards ficam ~100px no desktop.
   Escapa da coluna e centraliza na viewport, sem tocar no JS.
========================================================= */
.tapeteProduct #veja-na-pratica{
  width: min(1100px, 100vw - 32px);
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
@media (max-width: 560px){
  .tapeteProduct #veja-na-pratica{
    width: calc(100vw - 32px);
  }
}