/* ============================================
   LOJA — vitrine de produtos, estilo "Work"
   (masonry de tiles: mídia escura + meta + título)
   Identidade DOM HUB. O painel é sempre escuro
   (como uma miniatura/mídia); meta e título seguem
   o tema da home (claro/escuro).
   ============================================ */

.loja__head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.loja__head .label{ margin-bottom:18px; }
.loja__head .display{ margin:0 0 18px; }
.loja__head .lead{ margin:0; max-width:56ch; }

/* masonry via CSS columns */
.loja__work{ columns:2; column-gap:clamp(18px,2vw,30px); }
@media (max-width:760px){ .loja__work{ columns:1; } }

.work{ display:block; break-inside:avoid; margin:0 0 clamp(30px,3.4vw,48px); color:inherit; text-decoration:none; }

/* painel (mídia) — sempre escuro */
.work__panel{
  position:relative; border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 120% at 85% 10%, rgba(185,255,71,.14), transparent 46%), #0f120b;
  border:1px solid rgba(255,255,255,.10);
  min-height:240px; padding:0;
  transition:border-color .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.work--tall .work__panel{ min-height:340px; }
.work__panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(120% 90% at 50% 35%,#000,transparent 82%);pointer-events:none}
.work:hover .work__panel{ border-color:rgba(185,255,71,.45); transform:translateY(-3px); }
/* tile com imagem de produto */
.work__panel--img::before{display:none}
.work__panel--img picture{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.work__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.work:hover .work__img{transform:scale(1.03)}

/* tags no recorte superior direito (aba estilo "pasta") */
.work__tags{position:absolute;top:0;right:0;display:flex;gap:8px;flex-wrap:wrap;background:var(--bg,#161817);padding:0 0 12px 16px;border-bottom-left-radius:20px;z-index:2;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.work__tags::after{content:"";position:absolute;top:0;right:100%;width:20px;height:20px;background:radial-gradient(circle at 0 100%,transparent 20px,var(--bg,#161817) 20px)}
/* desktop com mouse: a aba fica escondida acima do painel e desliza no hover */
@media (hover:hover) and (min-width:769px){
  .work__tags{transform:translateY(-100%)}
  .work:hover .work__tags,.work:focus-visible .work__tags{transform:translateY(0)}
}
.work__tags span{font-size:12px;font-weight:500;padding:6px 13px;border-radius:999px;background:#1b1c1a;border:1px solid rgba(255,255,255,.12);color:#f3f3ee;white-space:nowrap}
.work__tags .seal{background:var(--gold);border-color:transparent;color:#161817;font-weight:600}


/* destaque (Atendente de IA) */
.work--feature .work__panel{border-color:rgba(185,255,71,.4);box-shadow:0 0 0 1px rgba(185,255,71,.1), 0 30px 70px -40px rgba(185,255,71,.3)}

/* título + descrição + preço (seguem o tema) */
.work__info{padding:18px 4px 0}
.work__title{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(23px,2.3vw,32px);line-height:1.05;letter-spacing:-.03em;color:var(--text);margin:0;transition:color .4s ease}
.work:hover .work__title{color:var(--gold)}
[data-theme="light"] .work:hover .work__title{color:#4e7a0f}
.work__desc{color:var(--text-dim);font-size:15px;line-height:1.5;margin:9px 0 0;max-width:40ch}
.work__price{font-family:"Neue Haas Display",sans-serif;font-size:19px;font-weight:500;color:var(--text);margin:13px 0 0;letter-spacing:-.01em}
.work__price .lbl{color:var(--text-dim);font-weight:400;font-size:14px}
.work__price small{color:var(--text-dim);font-weight:400}
.work__price--free{color:var(--gold)}
[data-theme="light"] .work__price--free{color:#4e7a0f}

/* card de ajuda — faixa ao final */
.loja__help{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-top:clamp(8px,1vw,16px);padding:clamp(26px,3vw,40px);
  border:1px dashed var(--line);border-radius:22px;
}
.loja__help h3{font-family:"Neue Haas Display",sans-serif;font-weight:400;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;color:var(--text);margin:0 0 6px}
.loja__help p{color:var(--text-dim);margin:0;max-width:52ch;font-size:15px}
.loja__help__cta{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.loja__help__cta .pill{display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--line);color:var(--text);font-size:15px;font-weight:500;transition:border-color .4s ease}
.loja__help__cta .node{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold);color:#161817}
.loja__help__cta .node svg{width:19px;height:19px}
.loja__help__cta:hover .pill{border-color:var(--gold)}

@media (max-width:620px){
  .work__tags{position:absolute;top:0;right:0;transform:none;margin:0;padding:0 0 11px 14px;background:var(--bg,#161817);border-bottom-left-radius:18px}
  .work__panel{min-height:0;aspect-ratio:16/10;padding:0}
  .work--tall .work__panel{min-height:0;aspect-ratio:4/3}
  .loja__help{flex-direction:column;align-items:flex-start}
  .loja__help__cta{width:100%}
  .loja__help__cta .pill{flex:1}
}
@media (prefers-reduced-motion:reduce){.work__panel,.work__title{transition:none}}