/* =========================================================================
   VITRINE DO CLIENTE — tela 2a do handoff
   Celular: coluna unica, header sobreposto na foto, tab bar embaixo.
   Computador: a grade abre em mais colunas e a tab bar sobe pro topo.
   ========================================================================= */

/* Coluna flex para o rodape encostar no pe da tela. Sem isso, tela curta
   (sacola vazia, favoritos sem nada) deixava o rodape no meio da pagina com
   500px de branco embaixo dele. */
.loja{
  max-width:520px;
  margin:0 auto;
  padding-bottom:96px;
  min-height:100vh;
  background:var(--color-bg);
  display:flex;
  flex-direction:column;
}

/* A tela ativa cresce e empurra o rodape para baixo; nunca encolhe. */
.loja > .tela.active{flex:1 0 auto;}
.loja > footer{margin-top:auto; flex:none;}

/* ----- Header da loja -----
   No celular ele fica fixo no topo sem cobrir os filtros.
   No computador continua acompanhando o menu. */
.loja-topo{
  position:sticky;
  top:0; left:0; right:0;
  z-index:1500;
  background:var(--color-bg);
  border-bottom:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  pointer-events:auto;
}

/* Fora do Início a foto de campanha nao existe, entao o cabecalho
   sobreposto sai de cena e cada tela usa o proprio titulo. A barra de
   abas fica: ela e fixa, nao depende do cabecalho. */
.loja:not([data-tela="inicio"]) .loja-marca,
.loja:not([data-tela="inicio"]) .loja-acoes{display:none;}

.loja-marca{
  display:flex;
  align-items:center;
  gap:0;
  font-family:Impact, 'Arial Black', var(--font-heading), sans-serif;
  font-size:22px;
  line-height:1;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.055em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(120,120,120,.55), 1px 3px 0 rgba(0,0,0,.9);
  pointer-events:auto;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:transform var(--t) var(--e), opacity var(--t) var(--e);
}
.loja-marca:hover{transform:translateY(-1px); opacity:.9;}

.loja-logo{
  width:148px;
  height:42px;
  border-radius:0;
  object-fit:contain;
  object-position:left center;
  background:transparent;
  flex:0 0 auto;
  box-shadow:none;
  /* A marca e prateada: no papel claro ela sumia. Invertida vira grafite e
     acompanha o modo da pagina, sem precisar de dois arquivos de imagem. */
  filter:invert(1) brightness(.42) contrast(1.5);
}
:root[data-theme="dark"] .loja-logo{filter:none;}

.loja-marca > span{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.loja-acoes{display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:2px 0; pointer-events:auto;}

.loja-icone{
  position:relative;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  flex:0 0 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:var(--r-xs);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
  overflow:visible;
}

.loja-icone svg{display:block; width:22px; height:22px; flex:0 0 auto; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

.loja-badge{
  position:absolute;
  top:2px; right:2px;
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:var(--r-pill);
  background:var(--color-accent);
  color:var(--color-bg);
  font-size:9px;
  font-weight:700;
  line-height:15px;
  text-align:center;
}

/* ----- Campanha ----- */
.campanha{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:#050505;
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}

.campanha img{
  width:100%;
  height:496px;
  object-fit:contain;
  object-position:center;
  background:var(--surface-sunken);
  display:block;
}

.campanha::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.58) 28%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.32) 100%),
    radial-gradient(circle at 22% 80%, rgba(252,158,105,.24), transparent 34%);
  pointer-events:none;
}

.campanha-texto{
  position:absolute;
  left:32px;
  bottom:34px;
  z-index:2;
  color:var(--color-bg);
  max-width:min(480px, 44vw);
  padding:24px 28px;
  border:1px solid rgba(245,234,216,.12);
  border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(8,8,8,.76), rgba(8,8,8,.42));
  backdrop-filter:blur(10px);
  transform:translateY(10px);
  opacity:0;
  animation:heroTextIn .65s var(--e) .12s forwards;
}

.campanha-kicker{
  display:block;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-photo);
  margin-bottom:8px;
}

.campanha-titulo{
  font-family:var(--font-title);
  font-size:34px;
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:16px;
}

.campanha-btn{
  display:inline-flex;
  align-items:center;
  border:none;
  border-radius:var(--r-pill);
  background:var(--color-accent);
  color:var(--color-bg);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  padding:11px 22px;
  cursor:pointer;
  touch-action:manipulation;
}

.campanha-btn:hover{background:var(--a-600);}

.campanha-carousel{
  touch-action:pan-y;
}

.campanha-track{
  position:absolute;
  inset:0;
}

.campanha-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(18px) scale(1.01);
  transition:opacity .55s var(--e), transform .75s var(--e);
}

.campanha-slide.is-active{
  opacity:1;
  transform:translateX(0) scale(1);
  z-index:1;
}

.campanha-photo-grid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:.92fr 1.18fr .92fr;
  gap:10px;
  padding:10px;
  background:#070707;
}

.campanha-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:var(--surface-sunken);
  display:block;
}

.campanha-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#070707;
  transform:scale(1);
  transition:transform 5.8s ease;
  border-radius:calc(var(--r-lg) - 10px);
  filter:saturate(.96) contrast(1.04);
}

.campanha-slide.is-active .campanha-hero-img{animation:heroPhotoDrift 7s ease-in-out both;}
.campanha-slide.is-active .campanha-hero-img:nth-child(2){animation-delay:.1s;}
.campanha-slide.is-active .campanha-hero-img:nth-child(3){animation-delay:.2s;}

.campanha-dots{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:3;
  display:flex;
  gap:8px;
  align-items:center;
}

.campanha-dot{
  width:10px;
  height:10px;
  border:none;
  border-radius:999px;
  background:rgba(245, 234, 216, .55);
  opacity:.72;
  cursor:pointer;
  padding:0;
  transition:transform .2s var(--e), opacity .2s var(--e), background .2s var(--e);
}

.campanha-dot.active{
  background:var(--color-bg);
  opacity:1;
  transform:scale(1.15);
}

@keyframes heroTextIn{
  to{opacity:1; transform:translateY(0);}
}

@keyframes heroPhotoDrift{
  0%{transform:scale(1.035) translateX(0);}
  55%{transform:scale(1.07) translateX(-8px);}
  100%{transform:scale(1.04) translateX(0);}
}

/* ----- Faixa de categorias rolavel ----- */
.cats{
  display:flex;
  gap:8px;
  padding:16px 18px;
  overflow-x:auto;
  scrollbar-width:none;
}

.cats::-webkit-scrollbar{display:none;}

.cat{
  flex:0 0 auto;
  min-height:32px;
  padding:7px 16px;
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-70);
  font-family:inherit;
  font-size:12.5px;
  cursor:pointer;
  touch-action:manipulation;
}

.cat.active{background:var(--ink); border-color:var(--ink); color:var(--color-bg);}

/* Segunda fila: os tipos da categoria escolhida. Fica encostada na fila de
   cima e mais discreta, para ler como um filtro DENTRO da categoria e nao
   como outra lista de categorias. */
.cats-tipos{
  padding-top:0;
  padding-bottom:10px;
}

.cats-tipos .cat{
  min-height:29px;
  padding:5px 13px;
  font-size:11.5px;
  border-style:dashed;
}

.cats-tipos .cat.active{border-style:solid;}

/* ----- Grade de pecas ----- */
.pecas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 12px;
  padding:0 18px;
}

/* ----- Sugestoes no pe da tela da peca ----- */
.sugestoes{
  padding:26px 18px 0;
  margin-top:22px;
  border-top:1px solid var(--line-soft);
}

.sugestoes-topo{margin-bottom:14px;}
.sugestoes-topo h2{font-size:20px; line-height:1.15; margin-bottom:4px;}
.sugestoes-topo p{color:var(--ink-55); font-size:12.5px; line-height:1.45;}

.sugestoes-grade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 12px;
}

.peca{
  cursor:pointer;
  position:relative;
  animation:pecaIn .34s var(--e) both;
  transition:transform .2s var(--e);
}

.peca:hover{transform:translateY(-2px);}
.peca:active{transform:translateY(0) scale(.99);}

.peca-foto{
  position:relative;
  height:214px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--n-300);
  margin-bottom:9px;
}

/* cover, nao contain: a foto preenche o card inteiro em vez de ficar boiando
   numa faixa creme. O corte tira as bordas, e a peca inteira aparece quando o
   cliente abre o produto. */
.peca-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:var(--surface-sunken);
  transition:transform .45s var(--e), filter .25s var(--e);
}

.peca:hover .peca-foto img{transform:scale(1.035);}

.peca-selo{
  position:absolute;
  top:9px; left:9px;
  background:var(--color-bg);
  color:var(--ink);
  font-size:10px;
  font-weight:600;
  padding:4px 10px;
  border-radius:var(--r-pill);
}

.peca-fav{
  position:absolute;
  top:9px; right:9px;
  width:28px;
  height:28px;
  border:none;
  border-radius:8px;
  background:var(--glass);
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.peca-fav svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2;}
.peca-fav.on{background:var(--color-accent); color:var(--color-bg);}
.peca-fav.on svg{fill:currentColor;}

.peca-nome{font-size:13px; line-height:1.3;}
.peca-preco{font-size:14px; font-weight:700; margin-top:2px;}
.peca-preco .old{font-size:12px; font-weight:400; color:var(--ink-40); text-decoration:line-through; margin-right:6px;}
.peca-tams{
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-55);
  margin-top:5px;
}
.peca-tams span{font-weight:700; text-transform:uppercase; letter-spacing:.08em;}
.peca-resta{font-size:10.5px; color:var(--a-700); margin-top:3px;}

.peca-acoes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.peca-acao{
  min-height:38px;
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  background:var(--color-bg);
  color:var(--ink);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .16s var(--e), background .2s var(--e), border-color .2s var(--e), color .2s var(--e);
}

.peca-acao:hover{transform:translateY(-1px);}
.peca-acao:active{transform:translateY(0) scale(.98);}
.peca-acao:focus-visible,
.peca-fav:focus-visible,
.cat:focus-visible,
.tab:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
}

.peca-acao.prim{
  background:var(--ink);
  color:var(--color-bg);
  border-color:var(--ink);
}

.peca-acao:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
}

@keyframes pecaIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}
}

/* ----- Tab bar ----- */
.tabbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:520px;
  z-index:1600;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  pointer-events:auto;
  touch-action:pan-x;
  -webkit-tap-highlight-color:transparent;
}

.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:9px 4px 4px;
  border:none;
  background:transparent;
  color:var(--ink-55);
  font-family:inherit;
  font-size:9.5px;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
}

.tab svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.tab.active{color:var(--color-accent);}

.tab-badge{
  position:absolute;
  transform:translate(11px, -4px);
  min-width:15px;
  height:15px;
  padding:0 4px;
  border-radius:var(--r-pill);
  background:var(--color-accent);
  color:var(--color-bg);
  font-size:9px;
  font-weight:700;
  line-height:15px;
}

/* ----- Telas internas da loja ----- */
.tela{display:none;}
.tela.active{display:block; animation:fadeIn .25s var(--e);}

.tela-topo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 18px 12px;
}

.tela-voltar{
  width:38px;
  height:38px;
  border:none;
  border-radius:var(--r-xs);
  background:var(--color-surface);
  color:var(--ink);
  font-size:17px;
  cursor:pointer;
  flex:0 0 auto;
}

.tela-titulo{font-family:var(--font-title); font-size:24px;}
.tela-corpo{padding:0 18px;}

.vazio{
  text-align:center;
  color:var(--ink-55);
  font-size:13.5px;
  padding:56px 20px;
}

/* ===== No computador a loja cresce e a tab bar sobe pro topo ===== */
@media (min-width:900px){
  .loja{max-width:clamp(1180px, 92vw, 1520px); padding-bottom:40px;}

  .loja-topo{
    position:sticky;
    background:var(--color-bg);
    border-bottom:1px solid var(--line-soft);
    padding:14px 26px;
    z-index:100;
    pointer-events:auto;
  }

  /* No computador o cabecalho vale em todas as telas */
  .loja:not([data-tela="inicio"]) .loja-marca,
  .loja:not([data-tela="inicio"]) .loja-acoes{display:flex;}
  .loja:not([data-tela="inicio"]) .loja-marca{display:block;}

  .loja-marca{color:var(--ink);}
  .loja-logo{width:158px; height:44px;}
  .loja-icone{color:var(--ink);}

  .campanha img{height:520px; border-radius:var(--r-lg);}
  .campanha-carousel{height:520px; margin:20px 26px 0;}
  .campanha{margin:20px 26px 0;}
  .campanha-texto{
    left:48px;
    right:auto;
    bottom:48px;
    width:min(38%, 440px);
    max-width:min(440px, 38vw);
    padding:26px 30px;
    border-radius:var(--r-md);
    background:linear-gradient(135deg, rgba(8,8,8,.78), rgba(8,8,8,.36));
    box-shadow:0 22px 48px rgba(0,0,0,.22);
    text-shadow:0 2px 18px rgba(0,0,0,.72);
  }
  .campanha-kicker{color:var(--a-700);}
  .campanha-titulo{font-size:52px; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.72);}
  .campanha-btn{color:var(--color-bg);}

  .cats{padding:20px 26px;}
  .pecas{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px 18px; padding:0 26px;}
  .sugestoes{padding:30px 26px 0; margin-top:26px;}
  .sugestoes-grade{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px 18px;}
  .sugestoes-topo h2{font-size:24px;}
  .peca-foto{height:300px;}
  .peca-nome{font-size:14px;}
  .tela-topo, .tela-corpo{padding-left:26px; padding-right:26px;}

  /* a tab bar vira um menu de texto no topo */
  .tabbar{
    position:static;
    transform:none;
    max-width:none;
    width:auto;
    display:flex;
    gap:4px;
    background:none;
    backdrop-filter:none;
    border-top:none;
    padding:0;
  }

  .tab{
    flex-direction:row;
    gap:7px;
    font-size:13px;
    padding:9px 14px;
    border-radius:var(--r-pill);
  }

  .tab svg{width:17px; height:17px;}
  .tab.active{background:var(--ink); color:var(--color-bg);}
  .tab-badge{position:static; transform:none; margin-left:2px;}
}

/* ----- Tela da peca dentro da loja ----- */
#telaPeca{padding:var(--sp-3);}
#telaPeca .produto-layout{grid-template-columns:1fr; gap:var(--sp-3);}

.peca-salvar{
  min-height:44px;
  padding:0 var(--sp-3);
  border:1px solid var(--color-divider);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-70);
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  transition:background var(--t) var(--e), color var(--t) var(--e);
}

.peca-salvar:hover{background:var(--wash); color:var(--ink);}
.peca-salvar:active{background:var(--a-200); color:var(--a-800);}
.peca-salvar.on{background:var(--a-100); border-color:var(--a-300); color:var(--a-700);}

/* ----- Estados de toque da vitrine ----- */
.cat:hover{background:var(--wash);}
.cat:active{background:var(--a-200); border-color:var(--a-300); color:var(--a-800);}
.cat.active:hover{background:var(--n-900);}

.peca-fav:hover{background:var(--color-bg);}
.peca-fav.on:hover{background:var(--a-600);}
.peca-fav.on:active{background:var(--a-700);}

.campanha-btn:active{background:var(--a-700);}
.loja-icone:hover{background:var(--wash);}
.loja-zap{
  background:#237b57;
  color:#fff;
  text-decoration:none;
  box-shadow:0 5px 14px rgba(35,123,87,.2);
  overflow:hidden;
}
.loja-zap img{display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:scale(1.24);}
.loja-zap:hover{background:#1d694a; color:#fff;}
.order-feedback{min-height:19px; margin-top:9px; color:var(--color-accent); font-size:11.5px; font-weight:600; text-align:center; overflow-wrap:anywhere;}

/* Miniaturas da galeria do produto, sobre a foto grande. */
.produto-miniaturas{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px;
  scrollbar-width:none;
}

.produto-miniaturas::-webkit-scrollbar{display:none;}

.produto-mini{
  flex:0 0 auto;
  width:52px;
  height:62px;
  padding:0;
  border:2px solid transparent;
  border-radius:var(--r-xs);
  overflow:hidden;
  background:var(--surface-sunken);
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:border-color var(--t) var(--e);
}

.produto-mini img{width:100%; height:100%; object-fit:cover;}
.produto-mini.on{border-color:var(--color-bg);}
.produto-foto-nav{
  position:absolute;
  top:50%;
  z-index:3;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:0;
  border-radius:var(--r-xs);
  background:rgba(10,10,10,.72);
  color:var(--cream);
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:background var(--t) var(--e), transform var(--t) var(--e), color var(--t) var(--e);
}
.produto-foto-nav:hover{
  background:var(--color-accent);
  color:var(--on-accent);
  transform:translateY(-50%) scale(1.06);
}
.produto-foto-nav.prev{left:14px;}
.produto-foto-nav.next{right:14px;}

@media (max-width:520px){
  .produto-mini{width:44px; height:54px;}
  .produto-foto-nav{width:36px; height:36px; font-size:26px;}
  .campanha-photo-grid{grid-template-columns:1fr;}
  .campanha-photo-grid img:nth-child(n+2){display:none;}
}

/* Confirmacao que fica no lugar da sacola depois do pedido enviado. */
.pedido-ok{
  padding:18px 18px;
  border-radius:var(--r-md);
  background:var(--g-100);
  border:1px solid var(--g-300);
  color:var(--g-800);
  font-size:13.5px;
  line-height:1.5;
  text-align:center;
  overflow-wrap:anywhere;
}

.pedido-ok[hidden]{display:none;}
.btn-zap:disabled{cursor:wait; opacity:.7;}
.tab:hover{color:var(--ink);}
.tab.active:hover{color:var(--color-accent);}

@media (min-width:900px){
  #telaPeca{padding:var(--sp-4);}
  #telaPeca .produto-layout{grid-template-columns:1.05fr .95fr; gap:var(--sp-5);}
  .tab.active:hover{color:var(--color-bg);}
}

@media (max-width:430px){
  .loja-topo{padding:12px 16px;}
  .loja-marca{font-size:18px; gap:0;}
  .loja-logo{width:126px; height:36px;}
  .loja-icone{width:36px; height:36px; min-width:36px; min-height:36px; flex-basis:36px;}
  .loja-icone svg{width:20px; height:20px;}
  .pecas{grid-template-columns:1fr; gap:14px; padding:0 16px;}
  .peca-foto{height:260px;}
  .cats{
    padding:14px 16px;
    flex-wrap:wrap;
    overflow-x:visible;
    touch-action:auto;
  }
  .tela-topo, .tela-corpo{padding-left:16px; padding-right:16px;}
  .campanha img{height:420px;}
  .campanha-carousel{height:420px;}
  .campanha::after{background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.72) 100%);}
  .campanha-texto{
    left:16px;
    right:auto;
    bottom:14px;
    transform:none;
    width:min(62%, 232px);
    max-width:min(62%, 232px);
    padding:11px 13px 11px;
    border-radius:var(--r-sm);
    background:rgba(8,8,8,.68);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    color:var(--cream);
  }
  .campanha-kicker{color:var(--color-accent); font-size:8px; margin-bottom:4px;}
  /* Nome comprido de peca ("Shorts Estonado Jeans Escuro") empurrava o botao
     para fora do card. Duas linhas e reticencias: o card tem sempre a mesma
     altura, seja qual for o produto em destaque. */
  .campanha-titulo{
    color:var(--cream);
    font-size:19px;
    line-height:1.08;
    margin-bottom:9px;
    text-shadow:0 2px 14px rgba(0,0,0,.5);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .campanha-btn{font-size:10.5px; padding:8px 15px;}
  /* Veu que apaga a foto ate o chao da pagina — segue o chao do tema. */
  .campanha::after{background:linear-gradient(180deg,
    color-mix(in srgb, var(--color-bg) 12%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 28%, transparent) 58%,
    color-mix(in srgb, var(--color-bg) 65%, transparent) 100%);}

  .peca-acoes{gap:7px; margin-top:9px;}
  .peca-acao{min-height:40px; font-size:12px;}
}

:root[data-theme="dark"] .campanha-texto{
  background:rgba(0,0,0,.76);
  color:var(--ink);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}

:root[data-theme="dark"] .campanha-kicker{color:var(--a-700);}
:root[data-theme="dark"] .campanha-titulo{color:var(--ink);}
:root[data-theme="dark"] .campanha::after{background:linear-gradient(to bottom, rgba(0,0,0,.18), transparent 45%, rgba(0,0,0,.52));}

/* ===== MEUS PEDIDOS (Perfil) ===== */
.meu-pedido{border:1px solid var(--line-soft); border-radius:var(--r-sm); margin-bottom:8px; overflow:hidden;}
.meu-pedido-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:none;
  border:none;
  font-family:inherit;
  color:var(--ink);          /* botao nao herda cor: sem isto vira texto do sistema */
  cursor:pointer;
  text-align:left;
}
.meu-pedido-head strong{display:block; font-size:13.5px;}
.meu-pedido-head small{display:block; margin-top:2px; font-size:11px; color:var(--ink-55);}
.meu-pedido-head > span:last-child{font-weight:700; font-size:13.5px; white-space:nowrap;}
.meu-pedido-itens{padding:0 14px 12px; display:grid; gap:8px;}
.meu-pedido-item{display:flex; align-items:center; gap:10px; font-size:12.5px;}
.meu-pedido-item img{width:40px; height:50px; object-fit:cover; border-radius:6px; background:var(--n-300); flex:0 0 auto;}

/* ----- Aviso "adicionado a sacola" -----
   Some ao clicar em Adicionar, em qualquer tela (grade ou peca aberta),
   pra ficar obvio que a peca entrou na sacola. */
.toast-add{
  position:fixed;
  left:50%;
  /* A tabbar fixa embaixo (~59px) so sai do rodape a partir de 900px
     (ver ".loja-topo" no media query abaixo); o toast precisa ficar
     acima dela ate la, senao cobre os icones de Inicio/Buscar/Sacola. */
  bottom:calc(71px + env(safe-area-inset-bottom));
  z-index:2000;
  display:flex;
  align-items:center;
  gap:10px;
  width:calc(100% - 32px);
  max-width:420px;
  padding:10px 12px;
  border-radius:var(--r-md);
  background:var(--ink);
  color:var(--color-bg);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  transform:translate(-50%, 16px);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}

.toast-add.is-in{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}

.toast-add img{width:38px; height:48px; object-fit:cover; border-radius:8px; background:var(--n-300); flex:0 0 auto;}

.toast-add-texto{display:grid; gap:1px; min-width:0; flex:1 1 auto;}
.toast-add-texto strong{font-size:12.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.toast-add-texto span{font-size:11px; opacity:.75;}

.toast-add-ver{
  flex:0 0 auto;
  padding:7px 12px;
  border-radius:var(--r-pill);
  background:var(--color-bg);
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:11px;
  white-space:nowrap;
  cursor:pointer;
}

@media (min-width:900px){
  .toast-add{left:auto; right:24px; bottom:24px; transform:translateY(16px);}
  .toast-add.is-in{transform:translateY(0);}
}