/* =====================================================================
   Loja virtual Futcloset — vitrine estilo "loja de departamento esportiva"
   Cores, fonte e raio vêm do painel (Loja virtual > Aparência) como
   variáveis em :root: --l-cor1, --l-cor2, --l-bg, --l-preco, --l-promo,
   --l-aviso, --l-raio, --l-fonte. Nada de cor de marca fixa aqui.
   Elemento-assinatura: a "faixa diagonal" (como a faixa de uma camisa
   de futebol) em --l-cor1, usada só na newsletter, rodapé e destaques.
   ===================================================================== */
:root {
  --l-txt: #14171a;
  --l-txt2: #5b636c;
  --l-borda: #e4e6e9;
  --l-sup: #ffffff;
  --l-foto: #eceef1;
  /* acento legível sobre branco, derivado da cor 1 (funciona p/ amarelo, verde...) */
  --l-acento: color-mix(in oklab, var(--l-cor1) 46%, #101010);
  --l-cor1-suave: color-mix(in srgb, var(--l-cor1) 16%, #fff);
  --l-sombra: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  --l-sombra-alta: 0 18px 48px rgba(16,24,40,.16);
  --l-r-sm: calc(var(--l-raio) * .5);
  --l-r-md: calc(var(--l-raio) * .75);
  --l-header-h: 0px;
}

/* ---------- base ---------- */
html { scroll-padding-top: 140px; }
body { font-family: var(--l-fonte), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--l-bg); color: var(--l-txt); font-size: .95rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3, .h1, .h2, .h3, .h4 { letter-spacing: -.02em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--l-acento); outline-offset: 2px; }
.form-control, .form-select { border-color: #d6d9dd; border-radius: var(--l-r-md); padding-top: .6rem; padding-bottom: .6rem; }
.form-control-sm, .form-select-sm { padding-top: .4rem; padding-bottom: .4rem; border-radius: var(--l-r-sm); }
.form-control:focus, .form-select:focus { border-color: var(--l-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-cor1) 35%, transparent); }
.form-check-input:checked { background-color: var(--l-cor2); border-color: var(--l-cor2); }
.form-check-input:focus { border-color: var(--l-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-cor1) 35%, transparent); }
.form-label { font-weight: 600; color: var(--l-txt); margin-bottom: .3rem; }
.btn { border-radius: var(--l-r-md); font-weight: 600; }
.btn-lg { padding: .8rem 1.4rem; font-size: 1.05rem; }
.btn-loja { background: var(--l-cor1); color: var(--l-cor1-txt); border: 0; font-weight: 800; border-radius: var(--l-r-md); }
.btn-loja:hover, .btn-loja:focus-visible, .btn-loja:active { background: var(--l-cor1) !important; color: var(--l-cor1-txt) !important; filter: brightness(.93); }
.btn-loja:disabled { background: #c9ced4; color: #fff; }
.btn-escuro { background: var(--l-cor2); color: var(--l-cor2-txt); border: 0; font-weight: 700; }
.btn-escuro:hover, .btn-escuro:focus-visible { background: var(--l-cor2); color: var(--l-cor2-txt); filter: brightness(1.15); }
.btn-outline-dark { border-color: #c9cdd2; color: var(--l-txt); }
.btn-outline-dark:hover { background: var(--l-txt); border-color: var(--l-txt); }
.txt-cor1 { color: var(--l-acento); }
.alert { border-radius: var(--l-r-md); border: 0; }
.pagination { gap: .3rem; }
.page-link { border-radius: var(--l-r-sm) !important; border: 1px solid var(--l-borda); color: var(--l-txt); min-width: 2.4rem; text-align: center; }
.page-item.active .page-link { background: var(--l-cor2); border-color: var(--l-cor2); color: var(--l-cor2-txt); }

/* ---------- barra de aviso ---------- */
.aviso-topo { background: var(--l-aviso); color: var(--l-aviso-txt); text-align: center; font-size: .8rem; font-weight: 700; padding: .45rem 1rem; }

/* ---------- cabeçalho ---------- */
.loja-header { background: var(--l-cor2); color: var(--l-cor2-txt); position: sticky; top: 0; z-index: 1020; transition: box-shadow .2s; }
.header-compacto .loja-header { box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.header-linha { display: flex; align-items: center; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; transition: padding .2s; }
.header-compacto .header-linha { padding-top: .55rem; padding-bottom: .55rem; }
.marca { text-decoration: none; color: inherit; flex-shrink: 0; display: inline-flex; align-items: center; }
.marca img { max-height: 46px; max-width: 220px; transition: max-height .2s; }
.header-compacto .marca img { max-height: 36px; }
.marca span { font-weight: 900; letter-spacing: .08em; font-size: 1.4rem; line-height: 1; }
.busca { position: relative; }
.busca-desk { flex: 1; max-width: 680px; margin: 0 auto; }
.busca .form-control { height: 48px; border-radius: calc(var(--l-raio) + 12px); padding: .65rem 3.6rem .65rem 1.25rem; border: 2px solid transparent; background: #fff; color: var(--l-txt); font-size: .95rem; }
.busca .form-control::placeholder { color: #7a828b; }
.busca .form-control:focus { border-color: var(--l-cor1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--l-cor1) 30%, transparent); }
.busca .btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: var(--l-cor1); color: var(--l-cor1-txt); border-radius: calc(var(--l-raio) + 8px); width: 52px; height: 38px; padding: 0; font-size: 1.05rem; }
.busca .btn:hover { filter: brightness(.93); }
.sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; color: var(--l-txt); border-radius: var(--l-r-md); box-shadow: var(--l-sombra-alta); z-index: 1100; overflow: hidden; max-height: 70vh; overflow-y: auto; border: 1px solid var(--l-borda); }
.sugestoes a { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; text-decoration: none; font-size: .9rem; }
.sugestoes a:hover, .sugestoes a:focus-visible { background: #f4f5f7; }
.sugestoes b { white-space: nowrap; color: var(--l-preco); }
.sug-termos { border-bottom: 1px solid var(--l-borda); padding: .25rem 0; }
.sug-termos a { color: var(--l-txt2); padding-top: .4rem; padding-bottom: .4rem; }
.sug-prod img, .sug-sem { width: 48px; height: 48px; object-fit: cover; border-radius: var(--l-r-sm); background: var(--l-foto); display: inline-flex; align-items: center; justify-content: center; color: #aab2bb; flex-shrink: 0; }
.sug-todos { justify-content: center; font-weight: 700; border-top: 1px solid var(--l-borda); color: var(--l-acento) !important; }
.header-icones { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.btn-ico { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; color: inherit; text-decoration: none; font-size: .82rem; font-weight: 600; line-height: 1.15; padding: .45rem .55rem; position: relative; border-radius: var(--l-r-sm); }
.btn-ico i { font-size: 1.4rem; line-height: 1; }
.btn-ico:hover { color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); }
.badge-cart { position: absolute; top: 0; right: 0; background: var(--l-cor1); color: var(--l-cor1-txt); font-size: .66rem; font-weight: 800; border-radius: 1rem; min-width: 1.2rem; text-align: center; padding: .12rem .35rem; line-height: 1.2; box-shadow: 0 0 0 2px var(--l-cor2); }
.badge-cart.pulsa { animation: pulsa .5s ease; }
@keyframes pulsa { 40% { transform: scale(1.35); } }

/* barra de categorias */
.loja-nav { border-top: 1px solid color-mix(in srgb, var(--l-cor2-txt) 12%, transparent); font-size: .88rem; font-weight: 600; max-height: 60px; transition: max-height .25s, opacity .2s; }
.header-compacto .loja-nav { max-height: 0; opacity: 0; overflow: hidden; border-top-color: transparent; }
.loja-nav a { color: inherit; text-decoration: none; display: inline-block; padding: .7rem 0; opacity: .82; position: relative; white-space: nowrap; }
.loja-nav > .container > a:hover, .loja-nav > .container > a:focus-visible { opacity: 1; }
.loja-nav > .container > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--l-cor1); transform: scaleX(0); transition: transform .2s; border-radius: 3px 3px 0 0; }
.loja-nav > .container > a:hover::after { transform: scaleX(1); }
.nav-todas { font-weight: 800; opacity: 1 !important; background: var(--l-cor1); color: var(--l-cor1-txt) !important; padding: .45rem .9rem !important; border-radius: var(--l-r-sm); margin: .3rem 0; }
.nav-promo { color: var(--l-cor1) !important; font-weight: 800; opacity: 1 !important; }
.mega { padding: 1.5rem; border-radius: var(--l-r-md); border: 1px solid var(--l-borda); box-shadow: var(--l-sombra-alta); min-width: 520px; display: none; gap: 2.5rem; margin-top: .35rem !important; }
.mega.show { display: flex; }
.mega-col { min-width: 180px; }
.mega-times { columns: 2; column-gap: 2rem; min-width: 340px; }
.mega-tit { font-size: .8rem; color: var(--l-txt2); font-weight: 700; margin-bottom: .5rem; column-span: all; }
.mega a { display: block; color: var(--l-txt); padding: .3rem 0; opacity: 1; font-weight: 500; }
.mega a:hover { color: var(--l-acento); text-decoration: underline; text-underline-offset: 3px; }
.menu-mobile a { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; text-decoration: none; border-bottom: 1px solid var(--l-borda); font-weight: 500; }
.menu-mobile a::after { content: '\F285'; font-family: 'bootstrap-icons'; font-size: .8rem; color: #9aa2ab; }
.menu-mobile .menu-tit { margin-top: 1.4rem; font-size: .8rem; color: var(--l-txt2); font-weight: 700; }
.menu-destaque { font-weight: 800 !important; }
#menuLoja .offcanvas-header { border-bottom: 4px solid var(--l-cor1); }
#menuLoja .offcanvas-header b { font-weight: 900; letter-spacing: .06em; font-size: 1.15rem; }

/* ---------- banner rotativo ---------- */
.banner-carousel { background: var(--l-cor2); }
.banner-carousel .carousel-item img { width: 100%; aspect-ratio: 21/8; object-fit: cover; display: block; }
@media (max-width: 767px) { .banner-carousel .carousel-item img { aspect-ratio: 4/3; } }
.banner-txt { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 2rem 0 2.75rem; background: linear-gradient(20deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 40%, transparent 70%); color: #fff; }
.banner-txt .container { max-width: 1320px; }
.banner-txt h2 { font-weight: 800; margin: 0; font-size: clamp(1.9rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.banner-txt p { margin: .6rem 0 1.25rem; font-size: clamp(1rem, 1.6vw, 1.2rem); opacity: .92; max-width: 40ch; }
.banner-txt .btn { padding-left: 1.8rem; padding-right: 1.8rem; }
@media (max-width: 767px) { .banner-txt { padding: 1.25rem 0 2.25rem; } .banner-txt .btn { width: 100%; } }
.carousel-indicators { margin-bottom: 1rem; }
.carousel-indicators [data-bs-target] { width: 26px; height: 4px; border-radius: 4px; border: 0; margin: 0 3px; opacity: .5; }
.carousel-indicators .active { opacity: 1; width: 40px; background: var(--l-cor1); }
.hero-sem-banner { background: var(--l-cor2); color: var(--l-cor2-txt); padding: 4rem 0; position: relative; overflow: hidden; }
.hero-sem-banner::before { content: ''; position: absolute; top: -40%; bottom: -40%; right: 8%; width: 18%; min-width: 90px; background: var(--l-cor1); transform: rotate(24deg); opacity: .95; }
.hero-sem-banner .container { position: relative; }
.hero-sem-banner h1 { font-weight: 800; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; max-width: 13ch; }

/* ---------- seções da home ---------- */
.secao { padding-top: 2.75rem; padding-bottom: .25rem; }
@media (max-width: 575px) { .secao { padding-top: 2rem; } }
.secao-tit { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.secao-tit h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; margin: 0; letter-spacing: -.03em; display: flex; align-items: center; gap: .6rem; }
.secao-tit h2::before { content: ''; width: 6px; height: 1.05em; background: var(--l-cor1); border-radius: 2px; transform: skewX(-14deg); flex-shrink: 0; }
.secao-tit > a { font-size: .85rem; font-weight: 700; margin-left: auto; color: var(--l-txt); text-decoration: none; white-space: nowrap; padding: .35rem .8rem; border: 1px solid var(--l-borda); border-radius: 2rem; background: var(--l-sup); }
.secao-tit > a:hover { border-color: var(--l-txt); }
@media (min-width: 768px) { .secao-tit > a.ms-2 { margin-left: .5rem !important; } }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }
.chips a { flex: 0 0 auto; background: var(--l-sup); border: 1px solid var(--l-borda); border-radius: 2rem; padding: .55rem 1.1rem; text-decoration: none; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.chips a.ativo, .chips a:hover { background: var(--l-cor2); color: var(--l-cor2-txt); border-color: var(--l-cor2); }

/* faixa de benefícios */
.faixa-info { background: var(--l-sup); border-top: 1px solid var(--l-borda); border-bottom: 1px solid var(--l-borda); }
.secao + .faixa-info { margin-top: 2.75rem; }
.faixa-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.info-item { display: flex; align-items: center; gap: .85rem; padding: 1.15rem 1rem; text-decoration: none; color: inherit; position: relative; }
.info-item + .info-item::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--l-borda); }
.info-item i { font-size: 1.35rem; color: var(--l-cor1-txt); background: var(--l-cor1); width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-item b { display: block; font-size: .9rem; font-weight: 700; line-height: 1.25; }
.info-item span { display: block; font-size: .78rem; color: var(--l-txt2); line-height: 1.3; }
a.info-item:hover b { text-decoration: underline; }
@media (max-width: 991px) {
  .faixa-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .faixa-grid::-webkit-scrollbar { display: none; }
  .info-item { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; padding: .9rem .75rem; }
  .info-item i { width: 40px; height: 40px; font-size: 1.15rem; }
}

/* banners de categoria */
.grade-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
@media (max-width: 575px) { .grade-cat { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }
.cat-banner { position: relative; border-radius: var(--l-raio); overflow: hidden; aspect-ratio: 4/5; display: block; color: #fff; text-decoration: none; background: var(--l-cor2); isolation: isolate; }
.cat-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat-banner:hover img { transform: scale(1.05); }
.cat-banner span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.1rem 1.1rem; background: linear-gradient(transparent, rgba(0,0,0,.78)); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.1; }
.cat-banner small { display: flex; width: fit-content; align-items: center; gap: .3rem; margin-top: .55rem; font-weight: 700; font-size: .78rem; letter-spacing: 0; background: var(--l-cor1); color: var(--l-cor1-txt); padding: .3rem .7rem; border-radius: 2rem; }

/* banners promocionais */
.grade-promo { display: grid; gap: 1rem; }
.grade-promo-2 { grid-template-columns: 1fr 1fr; } .grade-promo-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .grade-promo-2, .grade-promo-3 { grid-template-columns: 1fr; gap: .65rem; } }
.promo-banner { position: relative; border-radius: var(--l-raio); overflow: hidden; display: block; color: #fff; text-decoration: none; background: var(--l-cor2); }
.promo-banner img { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; transition: transform .5s; }
.promo-banner:hover img { transform: scale(1.03); }
.promo-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem 1.75rem; background: linear-gradient(90deg, rgba(0,0,0,.66), transparent 75%); }
.promo-txt b { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
.promo-txt small { margin-top: .35rem; opacity: .9; }
.promo-txt em { font-style: normal; font-weight: 800; margin-top: .9rem; font-size: .85rem; background: var(--l-cor1); color: var(--l-cor1-txt); padding: .45rem 1rem; border-radius: var(--l-r-sm); }

/* trilhos (carrosséis horizontais) */
.trilho, .trilho-times { display: grid; grid-auto-flow: column; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; scrollbar-color: #c9cdd2 transparent; overscroll-behavior-x: contain; }
.trilho { grid-auto-columns: calc((100% - 4rem) / 5); }
@media (max-width: 1199px) { .trilho { grid-auto-columns: calc((100% - 3rem) / 4); } }
@media (max-width: 767px) { .trilho { grid-auto-columns: 46%; gap: .65rem; } }
.trilho > * { scroll-snap-align: start; }
.trilho-times { grid-auto-columns: 104px; gap: .75rem; }
.time-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: inherit; scroll-snap-align: start; padding: .25rem 0; }
.time-logo { width: 84px; height: 84px; border-radius: 50%; background: var(--l-sup); box-shadow: inset 0 0 0 1px var(--l-borda); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 800; font-size: 1.25rem; color: var(--l-txt2); transition: box-shadow .2s, transform .2s; }
.time-logo img { width: 70%; height: 70%; object-fit: contain; }
.time-item:hover .time-logo { box-shadow: inset 0 0 0 3px var(--l-cor1); transform: translateY(-2px); }
.time-nome { font-size: .8rem; text-align: center; font-weight: 600; line-height: 1.2; }
.btn-seta { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--l-borda); background: var(--l-sup); display: inline-flex; align-items: center; justify-content: center; color: var(--l-txt); transition: background .15s, color .15s; }
.btn-seta:hover { background: var(--l-cor2); color: var(--l-cor2-txt); border-color: var(--l-cor2); }

/* vídeo / instagram / newsletter */
.video-box { border-radius: var(--l-raio); overflow: hidden; background: var(--l-cor2); }
.grade-insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
@media (max-width: 767px) { .grade-insta { grid-template-columns: repeat(3, 1fr); gap: .4rem; } }
.grade-insta a { position: relative; aspect-ratio: 1; border-radius: var(--l-r-md); overflow: hidden; display: block; background: var(--l-foto); }
.grade-insta img { width: 100%; height: 100%; object-fit: cover; }
.grade-insta i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s; }
.grade-insta a:hover i, .grade-insta a:focus-visible i { opacity: 1; }
.secao-tit h2 .bi-instagram { font-size: .9em; }

.newsletter { background: var(--l-cor2); color: var(--l-cor2-txt); border-radius: var(--l-raio); padding: 2.5rem 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; position: relative; overflow: hidden; isolation: isolate; }
.newsletter::before { content: ''; position: absolute; z-index: -1; top: -60%; bottom: -60%; left: 52%; width: 70px; background: var(--l-cor1); transform: rotate(28deg); box-shadow: 34px 0 0 color-mix(in srgb, var(--l-cor1) 35%, transparent); }
.newsletter > div { max-width: 30rem; }
.newsletter h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin: 0 0 .4rem; letter-spacing: -.03em; line-height: 1.1; }
.newsletter p { margin: 0; opacity: .82; }
.news-form { display: flex; gap: .5rem; flex: 1; max-width: 480px; min-width: 260px; background: #fff; padding: .35rem; border-radius: calc(var(--l-r-md) + .35rem); box-shadow: var(--l-sombra); }
.news-form .form-control { border: 0; box-shadow: none !important; color: var(--l-txt); }
.news-form .btn { padding-left: 1.4rem; padding-right: 1.4rem; }
@media (max-width: 767px) {
  .newsletter { padding: 1.75rem 1.25rem; }
  .newsletter::before { left: auto; right: -20px; width: 46px; }
  .news-form { min-width: 0; width: 100%; }
}

/* ---------- card de produto ---------- */
.grade-prod { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem 1rem; }
.col-lg-9 .grade-prod { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 575px) { .grade-prod, .col-lg-9 .grade-prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .65rem; } }
.card-prod { position: relative; background: var(--l-sup); border-radius: var(--l-raio); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--l-borda); transition: box-shadow .2s; }
.card-prod:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--l-txt) 18%, transparent), var(--l-sombra); }
.card-midia { position: relative; }
.card-img { position: relative; aspect-ratio: 1; background: var(--l-foto); overflow: hidden; display: block; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .5s; display: block; }
.card-img img.alt { position: absolute; inset: 0; opacity: 0; }
.card-prod:hover .card-img img { transform: scale(1.04); }
.card-prod:hover .card-img img.alt { opacity: 1; }
.sem-foto { height: 100%; display: flex; align-items: center; justify-content: center; color: #aab2bb; font-size: 2.5rem; }
.tag { position: absolute; top: .65rem; left: .65rem; background: var(--l-cor2); color: var(--l-cor2-txt); font-size: .72rem; font-weight: 800; padding: .22rem .55rem; border-radius: var(--l-r-sm); line-height: 1.2; z-index: 1; }
.tag-off { background: var(--l-promo); color: #fff; }
.card-info { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; text-decoration: none; color: inherit; }
.card-nome { font-size: .9rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card-info:hover .card-nome { text-decoration: underline; text-underline-offset: 2px; }
.card-tams { display: flex; flex-wrap: wrap; gap: .25rem; }
.card-tams span { font-size: .68rem; font-weight: 600; background: #f2f3f5; border-radius: 4px; padding: .1rem .38rem; color: var(--l-txt2); line-height: 1.4; }
.card-preco { margin-top: auto; padding-top: .15rem; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; }
.card-preco b { font-size: 1.18rem; font-weight: 800; color: var(--l-preco); letter-spacing: -.02em; order: 1; }
.card-preco s { font-size: .78rem; color: var(--l-txt2); order: 2; }
.card-parc { font-size: .75rem; color: var(--l-txt2); line-height: 1.3; margin-top: -.2rem; }
@media (max-width: 575px) {
  .card-info { padding: .65rem .65rem .8rem; }
  .card-nome { font-size: .84rem; }
  .card-preco b { font-size: 1.05rem; }
  .tag { top: .45rem; left: .45rem; }
}

/* compra rápida */
.compra-rapida { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; background: rgba(255,255,255,.97); backdrop-filter: blur(6px); border-radius: var(--l-r-md); padding: .6rem .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.16); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; transform: translateY(8px); z-index: 2; }
.card-prod:hover .compra-rapida, .card-prod:focus-within .compra-rapida { opacity: 1; pointer-events: auto; transform: none; }
.cr-tit { font-size: .7rem; font-weight: 600; color: var(--l-txt2); margin-bottom: .4rem; text-align: center; }
.cr-tams { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.cr-tams button { border: 1px solid #d3d7dc; background: #fff; color: var(--l-txt); border-radius: var(--l-r-sm); font-size: .78rem; font-weight: 700; padding: .32rem .5rem; min-width: 40px; transition: background .12s; }
.cr-tams button:hover, .cr-tams button:focus-visible { background: var(--l-cor2); color: var(--l-cor2-txt); border-color: var(--l-cor2); }
.cr-tams button:disabled { opacity: .5; }
@media (hover: none) { .compra-rapida { display: none; } }

/* ---------- listagem ---------- */
.lista-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--l-borda); }
.lista-topo h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; margin: 0; line-height: 1.1; }
.lista-qtd { color: var(--l-txt2); font-size: .88rem; }
.lista-topo .form-select { min-width: 170px; font-weight: 600; }
.migalhas { font-size: .82rem; color: var(--l-txt2); margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.migalhas a { text-decoration: none; color: var(--l-txt2); }
.migalhas a:hover { color: var(--l-txt); text-decoration: underline; }
.migalhas .sep { opacity: .5; }
.migalhas span:last-child { color: var(--l-txt); font-weight: 600; }
.filtros { background: var(--l-sup); border: 1px solid var(--l-borda); border-radius: var(--l-raio); padding: 1.25rem; position: sticky; top: 96px; }
.filtros h6 { font-size: .85rem; font-weight: 800; color: var(--l-txt); margin: 1.25rem 0 .55rem; padding-top: 1.1rem; border-top: 1px solid var(--l-borda); }
.filtros h6:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.filtros > a { display: flex; align-items: center; gap: .55rem; text-decoration: none; padding: .28rem 0; font-size: .9rem; color: #2f353b; }
.filtros > a::before { content: ''; width: 16px; height: 16px; border: 1.5px solid #b8bec5; border-radius: 4px; flex-shrink: 0; background: #fff; }
.filtros > a:hover { color: var(--l-txt); }
.filtros > a.ativo { font-weight: 700; color: var(--l-txt); }
.filtros > a.ativo::before { background: var(--l-cor2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--l-cor2); }
.filtros > a.limpar::before { display: none; }
.tam-filtro { display: flex; flex-wrap: wrap; gap: .35rem; }
.tam-filtro a { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; border: 1px solid #d3d7dc; border-radius: var(--l-r-sm); padding: .3rem .55rem; font-size: .8rem; font-weight: 700; text-decoration: none; background: #fff; }
.tam-filtro a:hover { border-color: var(--l-txt); }
.tam-filtro a.ativo { background: var(--l-cor2); color: var(--l-cor2-txt); border-color: var(--l-cor2); }
@media (max-width: 991px) { .filtros { position: static; margin-bottom: .5rem; } }

/* estados vazios */
.vazio { background: var(--l-sup); border: 1px dashed #cfd3d8; border-radius: var(--l-raio); text-align: center; padding: 3.5rem 1.5rem; }
.vazio-ico { width: 76px; height: 76px; border-radius: 50%; background: var(--l-cor1); color: var(--l-cor1-txt); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; }
.vazio h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: .35rem; }
.vazio p { color: var(--l-txt2); max-width: 36ch; margin: 0 auto 1.25rem; }

/* ---------- página de produto ---------- */
.prod-galeria { position: sticky; top: 96px; }
.prod-galeria .principal { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--l-foto); display: block; border-radius: var(--l-raio); }
.thumbs { display: flex; gap: .6rem; padding: .75rem 0 0; overflow-x: auto; }
.thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--l-r-sm); border: 2px solid transparent; cursor: pointer; background: var(--l-foto); opacity: .75; transition: opacity .15s; }
.thumbs img:hover { opacity: 1; }
.thumbs img.ativo { border-color: var(--l-cor2); opacity: 1; }
.prod-meta { font-size: .82rem; font-weight: 600; color: var(--l-txt2); margin-bottom: .4rem; }
.prod-info h1 { font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 0; }
.prod-precos { margin: 1.1rem 0 1.4rem; }
.prod-de { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--l-txt2); margin-bottom: .1rem; }
.prod-de .badge { font-size: .75rem; background: var(--l-promo) !important; border-radius: var(--l-r-sm); }
.prod-preco { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; color: var(--l-preco); line-height: 1.05; }
.prod-parc { font-size: .9rem; color: var(--l-txt2); margin-top: .2rem; }
.tam-rotulo { font-weight: 700; margin-bottom: .6rem; display: flex; gap: .35rem; align-items: baseline; }
.tamanhos { display: flex; flex-wrap: wrap; gap: .5rem; }
.tamanhos input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tamanhos label { min-width: 58px; height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .9rem; border: 1.5px solid #cdd1d6; border-radius: var(--l-r-sm); background: #fff; cursor: pointer; font-weight: 700; position: relative; transition: border-color .12s, background .12s; }
.tamanhos label:hover { border-color: var(--l-txt); }
.tamanhos input:focus-visible + label { outline: 3px solid var(--l-acento); outline-offset: 2px; }
.tamanhos input:checked + label { border-color: var(--l-cor2); background: var(--l-cor2); color: var(--l-cor2-txt); }
.tamanhos input:disabled + label { color: #a9afb6; background: repeating-linear-gradient(135deg, #fff 0 6px, #f3f4f6 6px 7px); cursor: not-allowed; text-decoration: line-through; border-color: #e3e5e8; }
.tamanhos .ult { position: absolute; top: -9px; right: -6px; background: var(--l-promo); color: #fff; font-size: .6rem; border-radius: 1rem; padding: .05rem .35rem; font-weight: 800; }
#avisoEstoque:not(:empty) { display: inline-flex; gap: .35rem; align-items: center; background: #fff7e6; color: #8a5300 !important; border-radius: var(--l-r-sm); padding: .35rem .65rem; font-weight: 600; }
.qtd-input { width: 84px; text-align: center; font-weight: 700; }
.compra-acoes .btn-lg { min-height: 54px; }
.prod-caixa { background: var(--l-sup); border: 1px solid var(--l-borda); border-radius: var(--l-raio); padding: 1.1rem 1.25rem; }
.prod-caixa-tit { font-weight: 700; font-size: .92rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .45rem; }
.calc-frete .opcao-frete { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; padding: .5rem 0; border-bottom: 1px dashed var(--l-borda); }
.calc-frete .opcao-frete:last-child { border-bottom: 0; }
.formas-pg { display: flex; flex-wrap: wrap; gap: .4rem; }
.formas-pg span { border: 1px solid var(--l-borda); border-radius: var(--l-r-sm); padding: .25rem .6rem; font-size: .76rem; font-weight: 600; background: #f8f9fa; }
.selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.selo { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; line-height: 1.3; color: var(--l-txt2); background: var(--l-sup); border: 1px solid var(--l-borda); border-radius: var(--l-r-md); padding: .8rem .75rem; }
.selo i { color: var(--l-txt) !important; }
.selo a { color: var(--l-txt); font-weight: 600; }
@media (max-width: 575px) { .selos { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--l-borda); border-radius: var(--l-r-md); background: var(--l-sup); } .selo { flex-direction: row; align-items: center; border: 0; border-radius: 0; background: none; padding: .65rem .85rem; } .selo + .selo { border-top: 1px solid var(--l-borda); } }
.prod-desc summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.prod-desc summary::-webkit-details-marker { display: none; }
.prod-desc summary::after { content: '\F282'; font-family: 'bootstrap-icons'; transition: transform .2s; }
.prod-desc[open] summary::after { transform: rotate(180deg); }
.prod-desc .pagina-txt { margin-top: .75rem; color: #343a40; }

/* barra fixa de compra no celular */
.barra-compra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; background: var(--l-sup); border-top: 1px solid var(--l-borda); box-shadow: 0 -8px 24px rgba(16,24,40,.1); padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .9rem; transform: translateY(110%); transition: transform .25s; }
.barra-compra.mostra { transform: none; }
.barra-compra .bc-preco { line-height: 1.15; min-width: 0; }
.barra-compra .bc-preco b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--l-preco); }
.barra-compra .bc-preco small { color: var(--l-txt2); font-size: .72rem; white-space: nowrap; }
.barra-compra .btn { flex: 1; min-height: 48px; }
@media (min-width: 768px) { .barra-compra { display: none; } }
body:has(.barra-compra.mostra) .whats-flutuante { bottom: 5.5rem; }

/* ---------- passos (carrinho → checkout → pedido) ---------- */
.passos { display: flex; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .82rem; font-weight: 600; color: var(--l-txt2); }
.passos li { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.passos li + li::before { content: ''; width: clamp(14px, 4vw, 48px); height: 2px; background: var(--l-borda); margin-right: .1rem; }
.passos .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cdd1d6; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; background: var(--l-sup); }
.passos .feito .n { background: var(--l-cor2); border-color: var(--l-cor2); color: var(--l-cor2-txt); }
.passos .atual { color: var(--l-txt); }
.passos .atual .n { background: var(--l-cor1); border-color: var(--l-cor1); color: var(--l-cor1-txt); }
@media (max-width: 420px) { .passos .rot-longo { display: none; } }

.pg-tit { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.035em; margin-bottom: 1.25rem; line-height: 1.1; }
.caixa-branca { background: var(--l-sup); border: 1px solid var(--l-borda); border-radius: var(--l-raio); padding: 1.4rem; }
@media (max-width: 575px) { .caixa-branca { padding: 1.1rem; } }
.cart-item { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--l-borda); align-items: flex-start; }
.cart-item:first-of-type { padding-top: .2rem; }
.cart-item:last-child { border-bottom: 0; padding-bottom: .2rem; }
.cart-item img, .cart-item .sem-foto { width: 92px; height: 92px; border-radius: var(--l-r-md); object-fit: cover; background: var(--l-foto); font-size: 1.4rem; flex-shrink: 0; }
.cart-item .ci-nome { font-weight: 700; text-decoration: none; line-height: 1.3; display: block; }
.cart-item .ci-nome:hover { text-decoration: underline; }
.cart-item .ci-tam { display: inline-block; background: #f2f3f5; border-radius: 4px; padding: .05rem .45rem; font-weight: 700; color: var(--l-txt); font-size: .78rem; }
.cart-item .ci-total { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.ci-qtd { width: 76px !important; text-align: center; font-weight: 700; }
.ci-remover { color: var(--l-txt2) !important; text-decoration: none; font-size: .82rem; padding: .25rem .4rem; }
.ci-remover:hover { color: var(--l-promo) !important; }
@media (max-width: 575px) { .cart-item img, .cart-item .sem-foto { width: 76px; height: 76px; } }
.resumo-tit { font-weight: 800; font-size: 1.1rem; margin-bottom: .9rem; letter-spacing: -.02em; }
.resumo-linha { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.resumo-total { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; border-top: 1px solid var(--l-borda); padding-top: .8rem; margin-top: .5rem; }
.resumo-item { display: flex; justify-content: space-between; gap: .75rem; font-size: .88rem; padding: .35rem 0; }
.resumo-sticky { position: sticky; top: 96px; }
.selo-seguro { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .78rem; color: var(--l-txt2); margin-top: .9rem; }
.opcao { display: flex; gap: .8rem; align-items: flex-start; border: 1.5px solid var(--l-borda); border-radius: var(--l-r-md); padding: .9rem 1rem; cursor: pointer; background: #fff; margin-bottom: .55rem; transition: border-color .12s, background .12s; }
.opcao:hover { border-color: #b9bfc6; }
.opcao:has(input:checked) { border-color: var(--l-cor2); background: color-mix(in srgb, var(--l-cor1) 7%, #fff); box-shadow: inset 0 0 0 1px var(--l-cor2); }
.opcao input { margin-top: .25rem; flex-shrink: 0; }
.passo { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--l-txt); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.passo-n { width: 28px; height: 28px; border-radius: 50%; background: var(--l-cor2); color: var(--l-cor2-txt); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; flex-shrink: 0; }

/* ---------- status do pedido ---------- */
.pedido-ok { text-align: center; padding: 2.25rem 1.5rem; position: relative; overflow: hidden; }
.pedido-ok .ok-ico { width: 72px; height: 72px; border-radius: 50%; background: #16a34a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 2.2rem; }
.caixa-alerta { border-left: 4px solid #f59e0b; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.7rem; font-size: .9rem; }
.timeline li::before { content: ''; position: absolute; left: 0; top: .3rem; width: .85rem; height: .85rem; border-radius: 50%; background: #fff; border: 2px solid #b9bfc6; }
.timeline li:first-child::before { background: var(--l-cor1); border-color: var(--l-cor2); }
.timeline li::after { content: ''; position: absolute; left: .37rem; top: 1.3rem; bottom: .1rem; width: 2px; background: var(--l-borda); }
.timeline li:last-child::after { display: none; }

/* ---------- rodapé ---------- */
.loja-footer { background: var(--l-cor2); color: var(--l-cor2-txt); padding: 0 0 1.5rem; margin-top: 4rem; position: relative; }
.rodape-faixa { height: 5px; background: var(--l-cor1); }
.rodape-corpo { padding-top: 3rem; }
.rodape-marca { font-weight: 900; font-size: 1.35rem; letter-spacing: .06em; margin-bottom: .5rem; }
.rodape-tit { font-weight: 800; font-size: .92rem; margin-bottom: .8rem; }
.loja-footer ul li { margin-bottom: .45rem; }
.loja-footer a { color: inherit; opacity: .8; text-decoration: none; }
.loja-footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.rodape-pg { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.rodape-pg span { border: 1px solid color-mix(in srgb, var(--l-cor2-txt) 25%, transparent); border-radius: var(--l-r-sm); padding: .2rem .55rem; font-size: .74rem; font-weight: 600; }
.rodape-base { border-top: 1px solid color-mix(in srgb, var(--l-cor2-txt) 14%, transparent); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .8rem; opacity: .65; }
.whats-flutuante { position: fixed; right: 1rem; bottom: 1rem; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 8px 22px rgba(0,0,0,.22); z-index: 1030; text-decoration: none; transition: bottom .25s, transform .15s; }
.whats-flutuante:hover { color: #fff; transform: scale(1.06); }
.pagina-txt { white-space: pre-line; line-height: 1.7; }
.pagina-wrap .caixa-branca { font-size: 1rem; max-width: 72ch; }

#toastLoja { border-radius: var(--l-r-md); box-shadow: var(--l-sombra-alta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* utilitários */
.ms-n2 { margin-left: -.5rem; }
.min-w-0 { min-width: 0; }
.ci-tam-mini { color: var(--l-txt2); font-weight: 600; }
@media (max-width: 991px) {
  .header-linha { gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
  .marca span { font-size: 1.2rem; }
  .marca img { max-height: 38px; }
  .busca .form-control { height: 44px; }
  .busca .btn { height: 34px; width: 46px; }
}
input[name=cupom]::placeholder { text-transform: none; }
@media (max-width: 991px) { aside.col-lg-3:has(> .collapse:not(.show)) { display: none; } }

/* ---------- finish gate: robustez e celular ---------- */
/* imagem que não carregou (arquivo apagado/404): some o ícone quebrado + alt, fica o placeholder */
img.img-quebrada { visibility: hidden; }
.card-img:has(> img.img-quebrada:not(.alt))::after,
.prod-galeria:has(> img.principal.img-quebrada)::after,
.cart-item:has(> img.img-quebrada)::before { content: '\F42A'; font-family: 'bootstrap-icons'; color: #aab2bb; display: flex; align-items: center; justify-content: center; }
.card-img:has(> img.img-quebrada:not(.alt))::after { position: absolute; inset: 0; font-size: 2.5rem; }
.card-img img.alt.img-quebrada { display: none; }
.prod-galeria:has(> img.principal.img-quebrada) { position: relative; }
.prod-galeria:has(> img.principal.img-quebrada)::after { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; font-size: 3rem; }
.cart-item:has(> img.img-quebrada) > img { display: none; }
.cart-item:has(> img.img-quebrada)::before { width: 92px; height: 92px; border-radius: var(--l-r-md); background: var(--l-foto); font-size: 1.4rem; flex-shrink: 0; }
.banner-carousel img.img-quebrada, .cat-banner img.img-quebrada, .promo-banner img.img-quebrada, .grade-insta img.img-quebrada { visibility: hidden; }
.sugestoes img.img-quebrada { visibility: visible; }

/* radio/checkbox desmarcado com contraste mínimo 3:1 (WCAG 1.4.11) */
.form-check-input { border: 1.5px solid #858d96; }
.opcao .form-check-input { width: 1.15em; height: 1.15em; }

/* parcelamento em linha própria nas opções de pagamento */
.opcao-parc { display: block; margin-top: .1rem; }
.selo-seguro { text-align: center; }
.selo-seguro i { flex-shrink: 0; }

/* WhatsApp flutuante: não cobrir total/campos no fluxo de compra (celular) */
@media (max-width: 767px) {
  .whats-flutuante { width: 50px; height: 50px; font-size: 1.5rem; right: .75rem; bottom: .75rem; }
  body:has(.passos) .whats-flutuante { display: none; }
  body:has(.barra-compra) .whats-flutuante { display: none; } /* produto já tem "Tirar dúvidas no WhatsApp" */
}

/* produto no celular: preço e tamanhos mais perto da dobra */
@media (max-width: 767px) {
  .prod-galeria { position: static; }
  .migalhas { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; margin-bottom: .5rem; }
  .migalhas span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .prod-galeria .principal { aspect-ratio: auto; height: min(92vw, 46vh); object-fit: contain; }
  .prod-galeria .principal.sem-foto { height: min(92vw, 46vh); aspect-ratio: auto !important; }
  .prod-galeria:has(> img.principal.img-quebrada)::after { aspect-ratio: auto; height: min(92vw, 46vh); }
  .thumbs { padding-top: .5rem; gap: .45rem; }
  .thumbs img { width: 56px; height: 56px; }
  .prod-info h1 { font-size: 1.35rem; }
  .prod-precos { margin: .6rem 0 1rem; }
  .prod-preco { font-size: 1.9rem; }
}

/* ---------- aviso de cookies (LGPD) ---------- */
.cookie-aviso{position:fixed;left:0;right:0;bottom:0;z-index:1080;background:var(--l-cor2);color:var(--l-cor2-txt);padding:.85rem 0;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.cookie-aviso a{color:inherit;text-decoration:underline}
.cookie-aviso .btn-outline-light{color:var(--l-cor2-txt);border-color:currentColor}
@media (max-width:767.98px){.cookie-aviso{padding-bottom:calc(.85rem + env(safe-area-inset-bottom))}}

/* ---------- 2.0: catálogos, campanha, stories, interações ---------- */
.barra-catalogos{background:var(--l-cor2);color:var(--l-cor2-txt);border-top:1px solid rgba(255,255,255,.08);padding:.4rem 0;font-size:.85rem}
.chip-catalogo{color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.15rem .75rem;white-space:nowrap}
.chip-catalogo.ativo{background:var(--l-cor1);border-color:var(--l-cor1);color:var(--l-cor1-txt);font-weight:600}
.barra-campanha{background:#111;color:#fff;padding:.5rem 0;text-align:center}
.barra-campanha .campanha-img{max-height:44px;width:auto}
.barra-campanha .cronometro{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em}
.barra-campanha .cronometro span{display:inline-block;min-width:2ch;background:rgba(255,255,255,.12);border-radius:6px;padding:.05rem .3rem}
.tag.tag-campanha{font-weight:700}
.tag.tag-2{top:auto;bottom:.5rem}
.aviso-v2{font-size:.85rem;background:#f1f5f2;border-radius:var(--l-raio);padding:.5rem .7rem;display:flex;gap:.45rem;align-items:flex-start}
.aviso-v2 i{color:var(--l-cor1);font-size:1rem;line-height:1.25}
.aviso-cashback{background:#ecfdf3}
.aviso-brinde{background:#fff7e6}
.aviso-brinde i{color:#d97706}
.btn-curtir{position:relative;flex-direction:column;line-height:1}
.btn-curtir small{font-size:.7rem;font-weight:600}
.btn-curtir.ativo i{color:#e11d48}
.prod-info .btn-ico{color:var(--l-cor2);background:#fff;border:1px solid #e5e7eb;border-radius:50%;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pergunta{padding:.5rem 0;border-bottom:1px solid #eef0f2}
.estrelas{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.estrelas input{position:absolute;opacity:0;pointer-events:none}
.estrelas label{font-size:1.9rem;line-height:1;color:#d1d5db;cursor:pointer}
.estrelas input:checked~label,.estrelas label:hover,.estrelas label:hover~label{color:#f59e0b}
.estrelas input:focus-visible+label{outline:2px solid var(--l-cor1);outline-offset:2px}
.estrelas-lidas{color:#f59e0b;font-size:1.4rem;letter-spacing:.1em}
.cupom-ganho{font-size:1.5rem;font-weight:800;letter-spacing:.06em;border:2px dashed var(--l-cor1);border-radius:var(--l-raio);padding:.35rem;margin:.35rem 0}
.pagina-html img{max-width:100%;height:auto}
.stories-barra{display:flex;gap:.9rem;overflow-x:auto;padding:1rem 0 .4rem;scrollbar-width:none}
.stories-barra::-webkit-scrollbar{display:none}
.story-bolha{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;flex-shrink:0;width:74px;color:inherit}
.story-anel{width:68px;height:68px;border-radius:50%;padding:3px;background:conic-gradient(var(--l-cor1),#f59e0b,#e11d48,var(--l-cor1));display:block}
.story-anel img,.story-anel video{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#eee;display:block}
.story-bolha small{font-size:.72rem;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-viewer{position:fixed;inset:0;z-index:1100;background:#000;display:flex;align-items:center;justify-content:center}
.story-viewer .sv-midia{max-width:min(100vw,480px);width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.story-viewer .sv-midia img,.story-viewer .sv-midia video{max-width:100%;max-height:100%;object-fit:contain}
.sv-barras{position:absolute;top:.6rem;left:50%;transform:translateX(-50%);width:min(94vw,460px);display:flex;gap:4px;z-index:3}
.sv-barras span{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.sv-barras span i{display:block;height:100%;width:0;background:#fff}
.sv-barras span.cheia i{width:100%}
.sv-fechar{position:absolute;top:1.3rem;right:1rem;z-index:4;background:none;border:0;color:#fff;font-size:1.5rem}
.sv-titulo{position:absolute;top:1.6rem;left:1rem;color:#fff;font-weight:600;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.sv-link{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:4;font-weight:700}
.sv-ant,.sv-prox{position:absolute;top:0;bottom:0;width:35%;background:none;border:0;z-index:2}
.sv-ant{left:0}.sv-prox{right:0}
.selo-campanha-prod .tag{position:static;display:inline-block;margin:0}

/* ---------- personalização (nome e número) ---------- */
.pers-box { border: 1.5px solid var(--l-borda); border-radius: var(--l-r-sm); padding: .9rem; background: #fff; }
.pers-tit { font-weight: 800; margin-bottom: .6rem; }
.pers-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pers-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pers-toggle input, .pers-opcoes input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pers-toggle label { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: .5rem .6rem; border: 1.5px solid #cdd1d6; border-radius: var(--l-r-sm); cursor: pointer; font-weight: 700; font-size: .88rem; text-align: center; line-height: 1.2; }
.pers-opcoes label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; height: 100%; padding: .6rem .4rem; border: 1.5px solid #cdd1d6; border-radius: var(--l-r-sm); cursor: pointer; text-align: center; line-height: 1.2; }
.pers-opcoes .po-nome { font-weight: 700; font-size: .85rem; }
.pers-opcoes .po-preco { font-size: .9rem; white-space: nowrap; }
.pers-opcoes .po-obs { font-size: .72rem; opacity: .75; white-space: nowrap; }
.pers-toggle label:hover, .pers-opcoes label:hover { border-color: var(--l-txt); }
.pers-toggle input:checked + label, .pers-opcoes input:checked + label { border-color: var(--l-cor2); background: var(--l-cor2); color: var(--l-cor2-txt); }
.pers-toggle input:focus-visible + label, .pers-opcoes input:focus-visible + label { outline: 3px solid var(--l-acento); outline-offset: 2px; }
.pers-campos { margin-top: .8rem; }
.pers-inputs { display: grid; grid-template-columns: 1fr 110px; gap: .6rem; margin: .8rem 0 .6rem; align-items: end; }
.pers-inputs .form-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pers-inputs .pers-f.d-none + .pers-f, .pers-inputs .pers-f:only-child { grid-column: 1 / -1; }
.pers-inputs:has(.pers-f[data-campo="nome"].d-none) { grid-template-columns: 1fr; }
.pers-inputs:has(.pers-f[data-campo="numero"].d-none) { grid-template-columns: 1fr; }
.pers-preview { background: #111418; color: #fff; border-radius: var(--l-r-sm); padding: .8rem; text-align: center; font-weight: 800; letter-spacing: .08em; min-height: 3.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pers-preview .pp-nome { font-size: 1.05rem; }
.pers-preview .pp-num { font-size: 2.2rem; line-height: 1; color: var(--l-cor1); }
.pers-preview:not(:has(span:not(:empty))) { display: none; }
.pers-total { margin: .6rem 0 .2rem; font-size: .95rem; }
.ci-pers, .pers-mini { display: block; font-size: .8rem; color: var(--l-txt); margin-top: .2rem; }
.pers-mini { color: #6b7280; }
@media (max-width: 360px) { .pers-opcoes { grid-template-columns: 1fr; } .pers-opcoes label { flex-direction: row; justify-content: space-between; } .pers-opcoes .po-obs:empty { display: none; } }