1import{r as v,j as e,cm as _a,bb as ya,aN as se,Y as K,a2 as ea,a6 as aa,aq as wa,ax as ka,aG as ja,au as Na,bQ as Sa,ar as za,ap as Ca,bD as Va,ae as Pa,a9 as Ta,aD as Qe,aK as Fa,cg as Ge,bO as He,bN as Aa,ao as ra}from"./vendor-Db3dtc8P.js";import{D as La}from"./DetailLink-dmz8PV1U.js";import{B,s as Da,a7 as Ma,a8 as qa,r as ta,o as Ra,a9 as Ia,x as de,w as oe,_ as Ea,V as $a,N as Xe,aa as Ba}from"./index-DSZXIeRn.js";import{D as Ka}from"./DetailHeader-5_QQ96yq.js";import{P as Wa}from"./PageHead-Cf8grOgd.js";import{S as Ua}from"./SaveButton-rdC1byGy.js";import{V as Oa}from"./VideoAnalysisModal-G1-bxK9T.js";import{C as Qa}from"./ContentTabs-BK0DRwLW.js";import{a as Ga}from"./useMarketShops-BZbcWDq-.js";import{N as Ha,O as Xa,P as Ya,Q as Ja,R as Za,S as er,T as ar,U as rr,K as tr,M as ie,L as Ye}from"./useMarketProxy-IzOhWBxk.js";import{u as oa,a as or}from"./useTranslate-EzUrHyv2.js";import{S as y}from"./Skeleton-BzBG2zbs.js";import{R as ir,A as sr}from"./RankSparkline-DcG4_jXz.js";import"./StaggeredRows-BkxLibk4.js";import{p as dr,P as lr,a as nr}from"./PeriodPicker-BphPWEDw.js";import{R as pr}from"./RevenueChannelChart-C90oQPaR.js";import{p as A}from"./parseBrNumber-MtTzsLSH.js";import{R as cr}from"./RevenueSparkline-CAaUN_iB.js";import{R as ur,L as mr,C as hr,X as xr,Y as gr,T as vr,c as fr}from"./vendor-charts-DTFi3o19.js";import{p as br,a as _r,c as Je}from"./marketDataJson-BUtJtZ7m.js";import{u as yr,P as wr}from"./useProductKit-BqrBfqma.js";import{u as kr}from"./RemixKitGate-DSa_Gb_0.js";import{u as ia}from"./useSelectedCountry-CBZ_AzWx.js";import"./vendor-md-BsnS-aAl.js";import"./useSavedItems-D-B7GhdG.js";import"./VideoDetailView-tdhYHeGM.js";import"./videoAds-C14qqL2N.js";import"./marketParse-DsN_ienL.js";import"./FilterDropdown-BtZUffs1.js";import"./useAnchoredMenu-_RvXLGlT.js";import"./useRemixKit-D1nys7iu.js";function jr(i){const l=i==null?void 0:i.ad;if(l==null||l===""||typeof l!="number"&&typeof l!="string"&&typeof l!="boolean")return null;const p=Number(l);return Number.isFinite(p)?p===1?1:0:null}function Nr(i){let l=0,p=0;for(const a of i){const n=jr(a);n!==null&&(l+=1,n===1&&(p+=1))}return l===0?null:{total:l,boosted:p}}function Sr({images:i,alt:l,fallbackSrc:p,onOpenLightbox:a,aspect:n="square"}){const[h,f]=v.useState(0),d=v.useMemo(()=>i.length>0?i:p?[p]:[],[i,p]),c=d.length,x=Math.min(h,Math.max(0,c-1)),k=d[x],g=v.useCallback(()=>{c>1&&f(_=>(_+1)%c)},[c]),w=v.useCallback(()=>{c>1&&f(_=>(_-1+c)%c)},[c]),N=v.useCallback(_=>{c<=1||(_.key==="ArrowLeft"?(_.preventDefault(),w()):_.key==="ArrowRight"?(_.preventDefault(),g()):(_.key==="Enter"||_.key===" ")&&a&&(_.preventDefault(),a(x)))},[c,w,g,a,x]);if(v.useEffect(()=>{if(c<=1)return;const _=(x+1)%c,o=B(d[_])??d[_];if(!o)return;const G=new Image;G.referrerPolicy="no-referrer",G.src=o},[x,c,d]),c===0)return e.jsx("div",{className:"pd-carousel pd-carousel--empty","aria-hidden":"true"});const Q=B(k)??k,T=!!a;return e.jsxs("div",{className:`pd-carousel pd-carousel--${n}`,onKeyDown:N,tabIndex:0,children:[e.jsxs("button",{type:"button",className:"pd-carousel__main-btn",onClick:()=>a==null?void 0:a(x),"aria-label":T?"Ampliar imagem":l,disabled:!T,children:[e.jsx("img",{src:Q,alt:l,className:"pd-carousel__main",loading:"eager",referrerPolicy:"no-referrer"}),T&&e.jsx("span",{className:"pd-carousel__zoom","aria-hidden":"true",children:e.jsx(_a,{size:14})})]}),c>1&&e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",className:"pd-carousel__nav pd-carousel__nav--prev","aria-label":"Imagem anterior",onClick:w,children:e.jsx(ya,{size:18})}),e.jsx("button",{type:"button",className:"pd-carousel__nav pd-carousel__nav--next","aria-label":"Próxima imagem",onClick:g,children:e.jsx(se,{size:18})}),e.jsxs("div",{className:"pd-carousel__counter","aria-hidden":"true",children:[x+1," / ",c]}),e.jsx("div",{className:"pd-carousel__dots",role:"tablist",children:d.map((_,o)=>e.jsx("button",{type:"button",role:"tab","aria-selected":o===x,"aria-label":`Ir para imagem ${o+1}`,className:`pd-carousel__dot${o===x?" is-active":""}`,onClick:()=>f(o)},o))})]})]})}function zr({points:i,isLoading:l,height:p=220}){const{t:a}=K(),n=v.useMemo(()=>[{key:"revenue",label:a("app.explorar.detalhe.produto.chart.revenue",{defaultValue:"Receita"}),color:"#FF8A3D"},{key:"video_revenue",label:a("app.explorar.detalhe.produto.chart.videoRevenue",{defaultValue:"VÃdeo"}),color:"#59A1F2"},{key:"live_revenue",label:a("app.explorar.detalhe.produto.chart.liveRevenue",{defaultValue:"Live"}),color:"#FF6B6B"}],[a]),h=["revenue","video_revenue","live_revenue"],f=v.useMemo(()=>(i??[]).map(d=>({day:d.partition_day??"",revenue:typeof d.revenue=="number"?d.revenue:A(d.revenue)??0,video_revenue:typeof d.video_revenue=="number"?d.video_revenue:A(d.video_revenue)??0,live_revenue:typeof d.live_revenue=="number"?d.live_revenue:A(d.live_revenue)??0})).sort((d,c)=>d.day.localeCompare(c.day)),[i]);return l?e.jsx("div",{className:"prc prc--loading","aria-busy":"true",children:e.jsx("div",{className:"prc__skeleton"})}):f.length<2?e.jsx("div",{className:"prc prc--empty",children:a("app.explorar.detalhe.produto.chart.empty",{defaultValue:"Sem dados suficientes para o perÃodo."})}):e.jsxs("div",{className:"prc",children:[e.jsx("div",{className:"prc__head",children:e.jsx("h4",{children:a("app.explorar.detalhe.produto.chart.title",{defaultValue:"Receita ao longo do tempo"})})}),e.jsx("div",{className:"prc__chart",children:e.jsx(ur,{width:"100%",height:p,children:e.jsxs(mr,{data:f,margin:{top:12,right:16,left:0,bottom:4},children:[e.jsx("defs",{children:h.map(d=>{const c=n.find(x=>x.key===d);return e.jsxs("linearGradient",{id:`prc-stroke-${d}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[e.jsx("stop",{offset:"0%",stopColor:c.color,stopOpacity:.65}),e.jsx("stop",{offset:"100%",stopColor:c.color,stopOpacity:1})]},`g-${d}`)})}),e.jsx(hr,{vertical:!1,strokeDasharray:"3 3",stroke:"var(--hairline-1)"}
1),e.jsx(xr,{dataKey:"day",tickFormatter:da,tick:{fill:"var(--text-dim)",fontSize:11},tickLine:!1,axisLine:{stroke:"var(--hairline-1)"},minTickGap:28}),e.jsx(gr,{tickFormatter:sa,tick:{fill:"var(--text-dim)",fontSize:11},tickLine:!1,axisLine:!1,width:52}),e.jsx(vr,{cursor:{stroke:"var(--brand-400, #FF8A3D)",strokeDasharray:"3 3"},content:d=>e.jsx(Cr,{active:d.active,payload:d.payload,label:d.label,series:n,activeKeys:h})}),h.map(d=>{const c=n.find(x=>x.key===d);return e.jsx(fr,{type:"monotone",dataKey:d,stroke:`url(#prc-stroke-${d})`,strokeWidth:2,dot:!1,activeDot:{r:4,stroke:c.color,strokeWidth:2,fill:"var(--bg-card)"},isAnimationActive:!0,animationDuration:420},d)})]})})}),e.jsx("ul",{className:"prc__legend",children:h.map(d=>{const c=n.find(x=>x.key===d);return e.jsxs("li",{className:"prc__legend-item",children:[e.jsx("span",{className:"prc__legend-swatch",style:{background:c.color}}),e.jsx("span",{children:c.label})]},d)})})]})}function Cr({active:i,payload:l,label:p,series:a,activeKeys:n}){return!i||!l||l.length===0?null:e.jsxs("div",{className:"prc__tooltip",children:[e.jsx("div",{className:"prc__tooltip-date",children:da(String(p??""))}),n.map(h=>{const f=a.find(c=>c.key===h),d=l.find(c=>c.dataKey===h);return!d||d.value==null?null:e.jsxs("div",{className:"prc__tooltip-row",children:[e.jsx("span",{className:"prc__tooltip-swatch",style:{background:f.color}}),e.jsx("span",{className:"prc__tooltip-label",children:f.label}),e.jsx("span",{className:"prc__tooltip-value",children:Vr(Number(d.value))})]},h)})]})}function sa(i){const l=typeof i=="number"?i:Number(i);if(!Number.isFinite(l)||l===0)return"0";const p=Math.abs(l);return p>=1e6?`${(l/1e6).toFixed(1).replace(".",",")}M`:p>=1e3?`${(l/1e3).toFixed(1).replace(".",",")}k`:Math.round(l).toString()}function Vr(i){return Number.isFinite(i)?Math.abs(i)<1e3?`R$${i.toFixed(2).replace(".",",")}`:`R$${sa(i)}`:"â"}function da(i){if(!/^\d{4}-\d{2}-\d{2}/.test(i))return i;const[,l,p]=i.split("-");return`${p}/${l}`}function la(i,l=6){const p=A(i==null?void 0:i.unit_price),a=(i==null?void 0:i.period_days)??7;return ea({queryKey:["similar_products",i==null?void 0:i.source_id,a,p,l],enabled:!!i&&p!=null&&p>0,queryFn:async()=>{if(!i||p==null)return[];const n=p*.7,h=p*1.3;let f=Da.from(Ma.PRODUCTS).select("*").eq("country",i.country??"BR").eq("period_days",a).neq("source_id",i.source_id);const d=i.pri_cate_id;d&&(f=f.eq("pri_cate_id",d));const{data:c,error:x}=await f.order("revenue_raw",{ascending:!1,nullsFirst:!1}).limit(100);if(x)throw x;return(c??[]).filter(w=>{const N=A(w.unit_price);return N!=null&&N>=n&&N<=h}).slice(0,l)}})}function Pr({productId:i,className:l}){const{t:p}=K(),a=aa(),n=kr(),h=yr(),{countries:f}=ia(),[d,c]=v.useState(!1),x=!n.loading&&!n.allowed;async function k(){if(!d){if(x){a("/kit");return}c(!0);try{const g=await h.mutateAsync({productId:i,country:f[0]??"BR"});a(`/kit/${g.kitId}`)}catch(g){if((g instanceof wr?g.code:"unknown")==="plan_disabled"){a("/kit");return}Na.error(g instanceof Error?g.message:p("app.productKit.cta.failed",{defaultValue:"Não consegui montar a proposta agora. Tente de novo."}))}finally{c(!1)}}}return e.jsxs("button",{type:"button",className:l??"btn-primary pd-actions-row__cta",onClick:()=>void k(),disabled:d,"aria-busy":d,children:[d?e.jsx(wa,{size:14,className:"kx-spin","aria-hidden":"true"}):x?e.jsx(ka,{size:13,"aria-hidden":"true"}):e.jsx(ja,{size:14,"aria-hidden":"true"}),d?p("app.productKit.cta.working",{defaultValue:"Montando a proposta..."}):p("app.productKit.cta.label",{defaultValue:"Prompts para VÃdeo"})]})}const Tr={map:(i,l)=>["product_angles",i,l]};function Fr(i,l,p){return ea({queryKey:Tr.map(i,l),enabled:!!i&&p,staleTime:30*60*1e3,gcTime:60*60*1e3,retry:!1,refetchOnWindowFocus:!1,queryFn:async()=>{const{data:a,error:n}=await qa("product-angles",{body:{productId:i,country:l}});if(n)throw n;return{occupied:Array.isArray(a==null?void 0:a.occupied)?a.occupied:[],gaps:Array.isArray(a==null?void 0:a.gaps)?a.gaps:[],videoCount:Number(a==null?void 0:a.videoCount)||0,analyzedCount:Number(a==null?void 0:a.analyzedCount)||0,cached:(a==null?void 0:a.cached)===!0,reason:(a==null?void 0:a.reason)??"ok",model:(a==null?void 0:a.model)??null}}})}function Ar({productId:i,country:l,enabled:p}){var k;const{t:a}=K(),n=Fr(i,l,p),h=v.useMemo(()=>{var g;return((g=n.data)==null?void 0:g.occupied)??[]},[n.data]),f=v.useMemo(()=>{var g;return((g=n.data)==null?void 0:g.gaps)??[]},[n.data]),d=v.useMemo(()=>[...h.flatMap(g=>[g.angle,g.example]),...f.flatMap(g=>[g.angle,g.why])],[h,f]),{data:c}=oa(d,{sourceLocale:"pt-BR",context:"sales angle of a TikTok Shop product"}),x=g=>c[g]||d[g]||"";return p?e.jsxs("section",{className:"pd-angles","aria-busy":n.isLoading,children:[e.jsxs("div",{className:"pd-angles__head",children:[e.jsx("h4",{className:"pd-block__title",children:a("app.explorar.detalhe.produto.angles.title",{defaultValue:"Ãngulos já ocupados"})}),e.jsx("p",{className:"pd-angles__subtitle",children:a("app.explorar.detalhe.produto.angles.subtitle",{defaultValue:"O que os vÃdeos deste produto já exploram, e o que ninguém tentou."})})]}),n.isLoading?e.jsxs("div",{className:"pd-angles__loading",children:[e.jsx(y,{variant:"line",width:"70%"}),e.jsx(y,{variant:"line",width:"55%"}),e.jsx(y,{variant:"line",width:"62%"}),e.jsx("span",{className:"pd-angles__note",children:a("app.explorar.detalhe.produto.angles.loading",{defaultValue:"Lendo as legendas dos vÃdeos deste produto..."})})]}):n.isError?e.jsxs("div",{className:"pd-angles__note",children:[a("app.explorar.detalhe.produto.angles.error",{defaultValue:"Não consegui mapear os ângulos agora."})," ",e.jsx("button",{type:"button",className:"pd-angles__retry",onClick:()=>void n.refetch(),children:a("app.explorar.detalhe.produto.angles.retry",{defaultValue:"Tentar de novo"})})]}):((k=n.data)==null?void 0:k.reason)==="no_access"?e.jsx("p",{className:"pd-angles__note",children:a("app.explorar.detalhe.produto.angles.noAccess",{defaultValue:"O mapa de ângulos faz parte dos planos ativos."})}):h.length===0&&f.length===0?e.jsx("p",{className:"pd-angles__note",children:a("app.explorar.detalhe.produto.angles.empty",{defaultValue:"Ainda não dá para mapear os ângulos: os vÃdeos deste produto não têm legenda suficiente."})}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"pd-twocol pd-twocol--symmetric",children:[e.jsxs("div",{className:"pd-block",children:[e.jsx("h5",{className:"pd-angles__coltitle",children:a("app.explorar.detalhe.produto.angles.occupiedTitle",{defaultValue:"Já ocupados"})}),e.jsx("ul",{className:"pd-angles__list",children:h.map((g,w)=>{var N;return e.jsxs("li",{className:"pd-angles__item",children:[e.jsx("span",{className:"pd-angles__angle",children:x(w*2)}),e.jsx("span",{className:"pd-angles__count",children:a("app.explorar.detalhe.produto.angles.countLabel",{defaultValue:"{{used}} de {{total}} vÃdeos",used:g.count,total:((N=n.data)==null?void 0:N.analyzedCount)??g.count})}),x(w*2+1)?e.jsxs("span",{className:"pd-angles__example",children:[a("app.explorar.detalhe.produto.angles.exampleLabel",{defaultValue:"Exemplo"}),": ",x(w*2+1)]}):null]},`${g.angle}-${w}`)})})]}),e.jsxs("div",{className:"pd-block",children:[e.jsx("h5",{className:"pd-angles__coltitle",children:a("app.explorar.detalhe.produto.angles.gapsTitle",{defaultValue:"Ninguém usou ainda"})}),f.length===0?e.jsx("p",{className:"pd-angles__note",children:a("app.explorar.detalhe.produto.angles.gapsEmpty",{defaultValue:"Nenhum espaço livre óbvio: os vÃdeos já cobrem bem os ângulos de
1ste produto."})}):e.jsx("ul",{className:"pd-angles__list",children:f.map((g,w)=>{const N=h.length*2+w*2;return e.jsxs("li",{className:"pd-angles__item pd-angles__item--gap",children:[e.jsx("span",{className:"pd-angles__angle",children:x(N)}),x(N+1)?e.jsx("span",{className:"pd-angles__example",children:x(N+1)}):null]},`${g.angle}-${w}`)})})]})]}),e.jsx("p",{className:"pd-angles__hint",children:a("app.explorar.detalhe.produto.angles.kitHint",{defaultValue:"O Kit do Produto usa este mapa para não repetir um ângulo já saturado."})})]})]}):null}function Lr(i){if(i==null)return null;const l=String(i).trim();if(!l||l==="-")return null;const p=l.match(/^(\d+(?:[.,]\d+)?)\s*%$/);let a;if(p)a=parseFloat(p[1].replace(",","."));else{const f=parseFloat(l.replace(",","."));if(!Number.isFinite(f))return null;a=f<=1?f*100:f}if(!(a>0))return null;const n=Math.round(a*10)/10;return`${Number.isInteger(n)?String(n):n.toFixed(1).replace(".",",")}%`}function gt(){var Ce,Ve,Pe,Te,Fe,Ae,Le,De,Me,qe,Re,Ie,Ee,$e,Be,Ke,We,Ue,Oe;const{id:i=""}=Sa(),l=aa(),p=ta(),{t:a}=K(),{locale:n}=Ra(),[h,f]=v.useState(dr(7)),d=nr(h)??7,[c,x]=v.useState(null),[k,g]=v.useState("videos"),{data:w,isLoading:N,error:Q}=Ia(i),T=Ha(i,d),_=Xa(i,d),o=v.useMemo(()=>{var s;if(w)return w;const r=(s=_.data)==null?void 0:s.data;if(!r||!r.product_title)return null;const t=new Date().toISOString();return{id:i||r.id||"",source_id:i||r.id||"",product_title:String(r.product_title),image_url:r.image_url??null,country:null,commission_rate:null,creator_num:null,data_json:null,gmv_a:null,gmv_b:null,launch_date:null,live_revenue:null,period_days:d,period_end:null,period_start:null,product_rating:null,rank:0,revenue:null,revenue_growth_rate:null,revenue_raw:null,sale:null,showcase_revenue:null,unit_price:null,video_revenue:null,created_at:t,updated_at:t}},[w,_.data,i,d]),G=N||w==null&&_.isLoading,na=Q&&_.error?Q:null,S=Ya(i,d,20),q=Ja(i,d,20),U=Za(i,d,20),pa=la(o,6),{countries:ca}=ia(),ua=ca[0]??"BR",le=er(i),H=ar(i,d),ne=rr(i),{data:X}=or(o==null?void 0:o.product_title,{sourceCountry:o==null?void 0:o.country,context:"TikTok Shop product title"}),ma=v.useMemo(()=>{var r;return(((r=S.data)==null?void 0:r.data)??[]).map(t=>t.description??"")},[S.data]),{data:ha}=oa(ma,{sourceCountry:o==null?void 0:o.country,context:"TikTok video caption"}),C=v.useMemo(()=>br(o),[o]),V=v.useMemo(()=>_r(C.revenue_grouping_rate),[C.revenue_grouping_rate]),W=v.useMemo(()=>Je(C.launch_date),[C.launch_date]),pe=v.useMemo(()=>{const r=C.creator_conversion_ratio;return typeof r!="number"||!Number.isFinite(r)?null:r<=1?r*100:r},[C.creator_conversion_ratio]),Z=v.useMemo(()=>{const r=C.min_real_price,t=C.max_real_price;return!r||!t||r===t?null:{lo:r,hi:t}},[C.min_real_price,C.max_real_price]),ce=v.useMemo(()=>{var m;const r=((m=S.data)==null?void 0:m.data)??[];if(r.length===0)return null;const t=new Map;for(const b of r){const z=(b.handle??"").trim();if(!z)continue;const $=A(b.revenue)??0;t.set(z,(t.get(z)??0)+$)}if(t.size===0)return null;const s=[...t.values()].sort((b,z)=>z-b),u=s.reduce((b,z)=>b+z,0);return u<=0?null:s[0]/u},[S.data]),F=v.useMemo(()=>{var r;return Nr(((r=S.data)==null?void 0:r.data)??[])},[S.data]),ee=v.useMemo(()=>{var t;return(((t=U.data)==null?void 0:t.data)??[]).map(s=>({id:typeof s.id=="string"?s.id:s.id!=null?String(s.id):"",handle:(s.handle??"").trim(),nickname:(s.nickname??"").trim(),followers:s.followers??null,revenueSum:A(s.revenue)??0})).sort((s,u)=>u.revenueSum-s.revenueSum)},[U.data]),R=((Ce=_.data)==null?void 0:Ce.data)??{},I=((Ve=T.data)==null?void 0:Ve.data)??{},E=(o==null?void 0:o.data_json)??{},P=r=>{for(const t of[R,I,E]){const s=t[r];if(typeof s=="string"&&s.trim())return s}return null},ue=r=>{for(const t of[R,I,E]){const s=t[r];if(typeof s=="number"&&Number.isFinite(s))return s;if(typeof s=="string"&&s.trim()){const u=Number(s);if(Number.isFinite(u))return u}}return null},me=r=>{for(const t of[R,I,E]){const s=t[r];if(Array.isArray(s)&&s.length>0)return s}return null},he=r=>{for(const t of[R,I,E]){const s=t[r];if(s===!0||s===1||s==="1"||s==="true")return!0}return!1},Y=P("seller_id")??P("shop_id"),ae=P("shop_name")??P("seller_name"),re=P("shop_logo")??P("seller_logo")??P("shop_avatar"),te=ue("product_review_count")??ue("review_count"),xe=v.useMemo(()=>{const r=["pri_cate_id","sec_cate_id","ter_cate_id"],t=[];for(const s of r){const u=P(s);u&&!/^\d+$/.test(u)&&t.push(u)}return t.length>0?t:null},[R,I,E]),J=me("productDesc"),ge=(he("productDescFlag")||!!J)&&!!J,D=me("skuInfo"),ve=(he("skuInfoFlag")||!!D)&&!!D,O
1=P("brand_name"),fe=v.useMemo(()=>Je(P("collect_day")),[R,I,E]),be=(()=>{const r=P("creator_gmv_concentration");if(!r)return null;const t=String(r).trim();return t.endsWith("%")?t:`${t}%`})(),[xa,_e]=v.useState(!1),[ga,ye]=v.useState(!1),[we,ke]=v.useState(null),je=Ga(Y),Ne=tr(Y,d),j=v.useMemo(()=>{var z;const r=((z=Ne.data)==null?void 0:z.data)??null,t=je.data,s=t?t.data_json??{}:null,u={};re&&(u.shop_logo=re),ae&&(u.shop_name=ae);const m=ie(r)||ie(s)||ie(u),b=Ye(r)||Ye(u)||(t==null?void 0:t.name)||null;return b?{source_id:Y??(t==null?void 0:t.source_id)??"",name:b,avatar:m,rank:(t==null?void 0:t.rank)??null,revenue:(t==null?void 0:t.revenue)??null,isFullService:(t==null?void 0:t.is_full_service)??!!(r!=null&&r.is_full_service),isOverseas:(t==null?void 0:t.is_overseas)??!!(r!=null&&r.is_overseas)}:null},[Y,ae,re,je.data,Ne.data]),va=(()=>{for(const r of[R,I,E])for(const t of["product_commission_rate","commission_rate"]){const s=r[t];if(s!=null&&String(s).trim()&&String(s).trim()!=="-")return s}return(o==null?void 0:o.commission_rate)??null})(),fa=Lr(va),Se=P("min_real_price")??P("unit_price")??(o==null?void 0:o.unit_price)??null,ze=o?`https://shop.tiktok.com/view/product/${o.source_id}`:null;function ba(){var m;if(!o)return;const r=[];r.push(a("app.explorar.detalhe.produto.seedRef",{title:o.product_title})),o.unit_price&&r.push(a("app.explorar.detalhe.produto.seedAvgPrice",{price:o.unit_price})),o.revenue&&r.push(a("app.explorar.detalhe.produto.seedRevenue",{revenue:o.revenue})),o.commission_rate&&o.commission_rate!=="-"&&r.push(a("app.explorar.detalhe.produto.seedCommission",{rate:o.commission_rate}));const t=(m=ne.data)==null?void 0:m.data,s=((t==null?void 0:t.highlights)??[]).map(b=>b.key_word).filter(b=>!!b);s.length>0&&r.push(a("app.explorar.detalhe.produto.seedHighlights",{list:s.join(", "),defaultValue:`CaracterÃsticas-chave: ${s.join(", ")}.`}));const u=((t==null?void 0:t.attributes)??[]).filter(b=>b.key&&b.value).map(b=>`${b.key}: ${b.value}`);u.length>0&&r.push(a("app.explorar.detalhe.produto.seedAttributes",{list:u.join("; "),defaultValue:`Atributos: ${u.join("; ")}.`})),O&&r.push(a("app.explorar.detalhe.produto.seedBrand",{brand:O,defaultValue:`Marca: ${O}.`})),r.push(a("app.explorar.detalhe.produto.seedAdapt")),l("/criar",{state:{seedTopic:r.join(` 2 3`),seedKind:"script"}})}return e.jsxs("main",{className:"explore-page explore-page--narrow pd-detalhe",children:[e.jsx("div",{className:"detail-toolbar",children:e.jsx(Wa,{to:"/explorar/produtos",label:a("app.explorar.detalhe.produto.backLabel")})}),e.jsx(Ka,{title:a("app.explorar.detalhe.produto.detailHeaderTitle"),backTo:"/explorar/produtos",backAriaLabel:a("app.explorar.detalhe.produto.backLabel")}),o?e.jsx(e.Fragment,{children:e.jsxs("header",{className:"pd-product-card",children:[(()=>{var u;const r=(((u=le.data)==null?void 0:u.data)??[]).filter(m=>typeof m=="string"&&m.length>0),t=B(o.image_url)??de(o.source_id),s=r.length>0?r:t?[t]:[];return e.jsx("div",{className:"pd-product-card__media",children:s.length===0?e.jsx("div",{className:"pd-product-card__thumb pd-product-card__thumb--empty"}):e.jsx(Sr,{images:r,fallbackSrc:t,alt:X||o.product_title||"",onOpenLightbox:m=>ke(m)})})})(),e.jsxs("div",{className:"pd-product-card__content",children:[e.jsx("h1",{className:"pd-product-card__title",children:X||o.product_title}),e.jsxs("div",{className:"pd-product-card__body",children:[e.jsxs("div",{className:"pd-product-card__row pd-product-card__row--identity",children:[e.jsx("span",{className:"pd-product-card__rank",children:a("app.explorar.detalhe.produto.rank",{rank:o.rank})}),e.jsx(ir,{sourceId:o.source_id,itemType:"product",periodDays:d}),o.product_rating!=null&&e.jsxs("span",{className:"pd-product-card__rating",children:[e.jsx(za,{size:12,fill:"currentColor"}),o.product_rating.toFixed(1),te!=null&&te>0&&e.jsxs("span",{className:"pd-product-card__rating-count",children:["(",oe(te,n),")"]})]})]}),xe&&e.jsx("div",{className:"pd-category-path","aria-label":a("app.explorar.detalhe.produto.category.aria",{defaultValue:"Categoria"}),children:xe.map((r,t)=>e.jsxs("span",{className:"pd-category-path__node",children:[t>0&&e.jsx(se,{size:11,"aria-hidden":"true"}),e.jsx("span",{children:r})]},t))}),Se&&e.jsx("div",{className:"pd-product-card__row pd-product-card__row--pricing",children:e.jsx("span",{className:"pd-product-card__price",children:Se})}),e.jsxs("div",{className:"pd-meta-line",children:[e.jsxs("span",{className:"pd-meta-item",children:[e.jsx("span",{className:"pd-meta-item__label",children:a("app.explorar.detalhe.produto.commission.label",{defaultValue:"Comissão"})}),e.jsx("span",{className:"pd-meta-item__value",children:fa??a("app.explorar.detalhe.produto.commission.notInformed",{defaultValue:"Não informada"})})]}),W&&e.jsxs("span",{className:"pd-meta-item",children:[e.jsx("span",{className:"pd-meta-item__label",children:a("app.explorar.detalhe.produto.launch.label",{defaultValue:"Lançado em"})}),e.jsxs("span",{className:"pd-meta-item__value",children:[W.date,W.daysAgo>0&&e.jsxs("span",{className:"pd-meta-item__sub",children:[" ","·"," ",a("app.explorar.detalhe.produto.launch.daysAgo",{count:W.daysAgo,days:W.daysAgo,defaultValue:`${W.daysAgo} dias`})]})]})]}),Z&&e.jsxs("span",{className:"pd-meta-item",children:[e.jsx("span",{className:"pd-meta-item__label",children:a("app.explorar.detalhe.produto.priceRange.label",{defaultValue:"Faixa de preço"})}),e.jsxs("span",{className:"pd-meta-item__value",children:[Z.lo," â ",Z.hi]})]}),O&&e.jsxs("span",{className:"pd-meta-item",children:[e.jsx("span",{className:"pd-meta-item__label",children:a("app.explorar.detalhe.produto.brand.label",{defaultValue:"Marca"})}),e.jsx("span",{className:"pd-meta-item__value",children:O})]}),fe&&e.jsxs("span",{className:"pd-meta-item pd-meta-item--soft",children:[e.jsx("span",{className:"pd-meta-item__label",children:a("app.explorar.detalhe.produto.collectDay.label",{defaultValue:"Registrado desde"})}),e.jsx("span",{className:"pd-meta-item__value",children:fe.date})]})]}),(ge||ve)&&e.jsxs("div",{className:"pd-doc-chips",children:[ge&&e.jsx("button",{type:"button",className:"pd-doc-chip",onClick:()=>_e(!0),children:a("app.explorar.detalhe.produto.desc.openButton",{defaultValue:"Descrição do produto"})}),ve&&D&&e.jsx("button",{type:"button",className:"pd-doc-chip",onClick:()=>ye(!0),children:a("app.explorar.detalhe.produto.sku.openButton",{count:D.length,n:D.length,defaultValue:`SKUs do produto (${D.length})`})})]})]}),j&&(()=>{const r=Ea(j.source_id)??B(j.avatar),t=[];j.rank&&t.push(a("app.explorar.detalhe.produto.shopMeta.rank",{rank:j.rank})),j.revenue&&t.push(a("app.explorar.detalhe.produto.shopMeta.revenue",{revenue:j.revenue}));const s=t.length>0||j.isFullService||j.isOverseas,u=e.jsxs(e.Fragment,{children:[r?e.jsx("img",{src:r,alt:"",className:"pd-shop-link__avatar",referrerPolicy:"no-referrer",onError:m=>{m.currentTarget.style.display="none"}}):e.jsx("span",{className:"pd-shop-link__avatar pd-shop-link__avatar--fallback",children:e.jsx(Ca,{size:16,"aria-hidden":"true"})}),e.jsxs("div",{className:"pd-shop-link__text",children:[e.jsx("span",{className:"pd-shop-link__name",children:a("app.explorar.detalhe.produto.shopLabel",{name:j.name})}),s&&e.jsxs("span",{className:"pd-shop-link__meta",children:[t.join(" · "),j.isFullService&&e.jsx("span",{className:"pd-shop-link__badge",children:a("app.explorar.lojas.badges.fullService",{defaultValue:"Full service"})}),j.isOverseas&&e.jsx("span",{className:"pd-shop-link__badge",children:a("app.explorar.lojas.badges.overseas",{defaultValue:"Internacional"})})]})]}),j.source_id&&e.jsx(se,{size:16,className:"pd-shop-link__chev","aria-hidden":"true"})]});return j.source_id?e.jsx(La,{to:`/explorar/lojas/${j.source_id}`,className:"pd-shop-link",children:u}):e.jsx("div",{className:"pd-shop-link pd-shop-link--static",children:u})})(),e.jsxs("div",{className:"pd-actions-row",children:[ze&&e.jsxs("a",{className:"filter-chip pd-actions-row__chip",href:ze,target:"_blank",rel:"noreferrer",children:[e.jsx("span",{className:"pd-actions-row__label-long",children:a("app.explorar.detalhe.produto.seeOnTikTokFull",{defaultValue:"Ver no TikTok"})}),e.jsx("span",{className:"pd-actions-row__label-short",children:a("app.explorar.detalhe.produto.seeOnTikTokShort",{defaultValue:"TikTok"})}),e.jsx(Va,{size:14})]}),e.jsx(Ua,{variant:"chip",itemType:"product",itemRef:o.source_id,title:o.product_title,thumbnailUrl:o.image_url,metadata:{revenue:o.revenue,rank:o.rank}
3}),e.jsx(Pr,{productId:o.source_id,productName:X||o.product_title}),e.jsxs("button",{type:"button",className:"btn-primary pd-actions-row__cta",onClick:ba,children:[e.jsx(Pa,{size:14}),a("app.explorar.detalhe.produto.createScript")]})]})]})]})}):G?e.jsx("section",{style:Ze,"aria-busy":"true",children:e.jsxs("div",{style:{display:"flex",gap:14,alignItems:"center"},children:[e.jsx(y,{variant:"block",width:96,height:96,style:{borderRadius:12}}),e.jsxs("div",{style:{display:"grid",gap:6,flex:1},children:[e.jsx(y,{variant:"title",width:"55%"}),e.jsx(y,{variant:"text",width:"35%"})]})]})}):e.jsxs("section",{style:{...Ze,textAlign:"center",padding:"28px 16px"},children:[e.jsx("p",{style:{margin:0,color:"var(--text-dim)",fontSize:14},children:na?a("app.explorar.detalhe.produto.loadError",{defaultValue:"Não foi possÃvel carregar este produto. Tente novamente em instantes."}):a("app.explorar.detalhe.produto.notFound",{defaultValue:"Produto não encontrado no momento. Pode ter saÃdo do ranking."})}),e.jsx(Ta,{to:"/explorar/produtos",style:{display:"inline-block",marginTop:12,fontSize:13,color:"var(--brand-400)",textDecoration:"none",fontWeight:600},children:a("app.explorar.detalhe.produto.backLabel",{defaultValue:"Todos os produtos"})})]}),e.jsxs("section",{className:"pd-metrics-section",children:[e.jsxs("header",{className:"pd-metrics-head",children:[e.jsx("h4",{className:"pd-metrics-head__title",children:a("app.explorar.detalhe.produto.kpisTitle",{count:d})}),e.jsx(lr,{value:h,onChange:f})]}),e.jsxs("div",{className:"pd-twocol pd-twocol--analytics",children:[(Pe=H.data)!=null&&Pe.data&&H.data.data.length>=2?e.jsxs("div",{className:"pd-chart-wrap",children:[e.jsx(zr,{points:H.data.data,isLoading:H.isLoading,height:"100%"}),V&&e.jsxs("div",{className:`pd-chart-growth pd-chart-growth--${V.sign}`,children:[V.sign==="up"?"â²":V.sign==="down"?"â¼":"â¢"," ",V.value>0?"+":"",V.value.toFixed(1),"%",e.jsxs("span",{className:"pd-chart-growth__sub",children:[" ",a("app.explorar.detalhe.produto.trend.label",{defaultValue:"Tendência da receita"})]})]})]}):C.revenue_trend&&C.revenue_trend.length>=2?e.jsxs("div",{className:"pd-trend-hero",children:[e.jsxs("div",{className:"pd-trend-hero__row",children:[e.jsx("span",{className:"pd-trend-hero__label",children:a("app.explorar.detalhe.produto.trend.label",{defaultValue:"Tendência da receita"})}),V&&e.jsxs("span",{className:`pd-trend-hero__growth pd-trend-hero__growth--${V.sign}`,"aria-label":a("app.explorar.detalhe.produto.trend.growthAria",{defaultValue:`Crescimento de ${V.value}%`}),children:[V.sign==="up"?"â²":V.sign==="down"?"â¼":"â¢"," ",V.value>0?"+":"",V.value.toFixed(1),"%"]})]}),e.jsx("div",{className:"pd-trend-hero__chart",children:e.jsx(cr,{values:C.revenue_trend,fluid:!0,height:72,strokeWidth:2,ariaLabel:a("app.explorar.detalhe.produto.trend.aria",{defaultValue:"Sparkline da receita"})})})]}):null,T.isLoading&&e.jsx("div",{className:"pd-kpis","aria-busy":"true",children:Array.from({length:6}).map((r,t)=>e.jsxs("div",{className:"pd-kpi pd-kpi--skeleton",children:[e.jsx(y,{variant:"text",width:"55%",height:10}),e.jsx(y,{variant:"title",width:"80%"})]},t))}),T.error&&e.jsx("p",{style:{color:"var(--danger)"},children:T.error.message}),((Te=T.data)==null?void 0:Te.data)&&(()=>{const r=T.data.data,t=r.shopping_mall_revenue??r.showcase_revenue??(o==null?void 0:o.showcase_revenue);return e.jsxs("div",{className:"pd-kpis",children:[e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.revenueTotal"),value:String(r.revenue??"â")}),e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.sales"),value:r.sale!=null?String(r.sale):"â"}),(r.unit_price??(o==null?void 0:o.unit_price))!=null&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.unitPrice"),value:String(r.unit_price??(o==null?void 0:o.unit_price))}),r.live_revenue!=null&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.liveRevenue"),value:String(r.live_revenue)}),r.video_revenue!=null&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.videoRevenue"),value:String(r.video_revenue)}),t!=null&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.showcase"),value:String(t)}),r.creator_num!=null&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.creators"),value:String(r.creator_num)}),pe!==null&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.creatorConversion",{defaultValue:"Conversão do criador"}),value:`${pe.toFixed(1).replace(".",",")}%`}),(be||ce!==null)&&e.jsx(L,{label:a("app.explorar.detalhe.produto.kpis.concentration"),value:be??`${Math.round((ce??0)*100)}%`})]})})()]})]}),(()=>{var u,m;const r=((u=T.data)==null?void 0:u.data)??{},t=[{key:"video",label:a("app.explorar.detalhe.produto.channels.video"),value:A(r.video_revenue)??0,formatted:r.video_revenue!=null?String(r.video_revenue):null},{key:"live",label:a("app.explorar.detalhe.produto.channels.live"),value:A(r.live_revenue)??0,formatted:r.live_revenue!=null?String(r.live_revenue):null},{key:"showcase",label:a("app.explorar.detalhe.produto.channels.showcase"),value:A(r.shopping_mall_revenue??r.showcase_revenue??(o==null?void 0:o.showcase_revenue))??0,formatted:(r.shopping_mall_revenue??r.showcase_revenue??(o==null?void 0:o.showcase_revenue))!=null?String(r.shopping_mall_revenue??r.showcase_revenue??(o==null?void 0:o.showcase_revenue)):null}],s=((m=T.data)==null?void 0:m.data)&&t.some(b=>b.value>0);return s?e.jsx("section",{className:"pd-twocol pd-twocol--symmetric pd-ch
3annels-row",children:s&&e.jsxs("div",{className:"pd-block",children:[e.jsx("h4",{className:"pd-block__title",children:a("app.explorar.detalhe.produto.channelsTitle")}),e.jsx(pr,{slices:t})]})}):null})(),(()=>{var u;const r=(u=ne.data)==null?void 0:u.data,t=((r==null?void 0:r.highlights)??[]).filter(m=>m.key_word),s=((r==null?void 0:r.attributes)??[]).filter(m=>m.key&&m.value);return t.length===0&&s.length===0?null:e.jsxs("section",{className:"pd-twocol pd-twocol--symmetric pd-traits-row",children:[t.length>0&&e.jsxs("div",{className:"pd-block",children:[e.jsx("h4",{className:"pd-block__title",children:a("app.explorar.detalhe.produto.highlights.title",{defaultValue:"CaracterÃsticas-chave"})}),e.jsx("ul",{className:"pd-highlights",children:t.map((m,b)=>e.jsx("li",{className:"pd-highlights__pill",title:m.region_text??void 0,children:m.key_word},b))})]}),s.length>0&&e.jsxs("div",{className:"pd-block",children:[e.jsx("h4",{className:"pd-block__title",children:a("app.explorar.detalhe.produto.attributes.title",{defaultValue:"Atributos"})}),e.jsx("dl",{className:"pd-attributes",children:s.map((m,b)=>e.jsxs("div",{className:"pd-attributes__row",children:[e.jsx("dt",{children:m.key}),e.jsx("dd",{children:m.value})]},b))})]})]})})(),i?e.jsx(Ar,{productId:i,country:ua,enabled:(((Ae=(Fe=S.data)==null?void 0:Fe.data)==null?void 0:Ae.length)??0)>0}):null,e.jsxs("section",{className:"pd-quem-vende",style:{marginTop:22},children:[F&&e.jsxs("div",{className:`pd-boosted${F.boosted===0?" pd-boosted--none":""}`,children:[e.jsx("span",{className:"pd-boosted__icon","aria-hidden":"true",children:e.jsx(Qe,{size:18,strokeWidth:2})}),e.jsxs("div",{className:"pd-boosted__text",children:[e.jsx("span",{className:"pd-boosted__badge",children:a("app.explorar.detalhe.produto.boosted.badge",{defaultValue:"A loja impulsiona"})}),e.jsx("p",{className:"pd-boosted__line",children:F.total===1?F.boosted===1?a("app.explorar.detalhe.produto.boosted.lineOnly",{defaultValue:"O único vÃdeo deste produto está sendo impulsionado pela loja"}):a("app.explorar.detalhe.produto.boosted.lineNoneOnly",{defaultValue:"O único vÃdeo deste produto não está sendo impulsionado pela loja"}):F.boosted===0?a("app.explorar.detalhe.produto.boosted.lineNone",{total:F.total,defaultValue:"Nenhum dos {{total}} vÃdeos deste produto está sendo impulsionado pela loja"}):F.boosted===1?a("app.explorar.detalhe.produto.boosted.lineOne",{total:F.total,defaultValue:"1 dos {{total}} vÃdeos deste produto está sendo impulsionado pela loja"}):a("app.explorar.detalhe.produto.boosted.lineMany",{boosted:F.boosted,total:F.total,defaultValue:"{{boosted}} dos {{total}} vÃdeos deste produto estão sendo impulsionados pela loja"})}),e.jsx("p",{className:"pd-boosted__hint",children:F.boosted>0?a("app.explorar.detalhe.produto.boosted.hint",{defaultValue:"Quando a loja coloca verba de anúncio, o TikTok amplifica os vÃdeos de afiliado que convertem. Dá para pegar esse alcance sem gastar nada do seu."}):a("app.explorar.detalhe.produto.boosted.hintNone",{defaultValue:"Sem verba de anúncio da loja, o alcance aqui depende só do orgânico."})})]})]}),e.jsx(Qa,{value:k,onChange:g,ariaLabel:a("app.explorar.detalhe.produto.whoSells.tabsAria",{defaultValue:"VÃdeos, criadores, lives ou produtos parecidos"}),tabs:[{key:"videos",label:a("app.explorar.tabs.videos"),Icon:Fa,count:((De=(Le=S.data)==null?void 0:Le.data)==null?void 0:De.length)??null},{key:"creators",label:a("app.explorar.tabs.criadores"),Icon:Ge,count:ee.length},{key:"lives",label:a("app.explorar.tabs.lives"),Icon:He,count:((qe=(Me=q.data)==null?void 0:Me.data)==null?void 0:qe.length)??null},{key:"similar",label:a("app.explorar.detalhe.produto.whoSells.similar",{defaultValue:"Produtos parecidos"}),Icon:Aa,count:((Re=pa.data)==null?void 0:Re.length)??null}]}),k==="videos"&&e.jsxs("div",{className:"pd-quem-vende__panel",children:[S.isLoading&&e.jsx("ol",{style:{listStyle:"none",padding:0,margin:0,display:"grid",gap:10},"aria-busy":"true",children:Array.from({length:5}).map((r,t)=>e.jsxs("li",{className:"pd-video-row",style:{pointerEvents:"none"},children:[e.jsx("div",{className:"pd-video-rank",children:e.jsx(y,{variant:"text",width:20})}),e.jsx(y,{variant:"block",width:48,height:80,style:{borderRadius:8}}),e.jsxs("div",{style:{display:"grid",gap:4,minWidth:0,flex:1},children:[e.jsx(y,{variant:"text",width:"65%"}),e.jsx(y,{variant:"text",width:"40%",height:11})]})]},t))}),S.error&&e.jsx("p",{style:{color:"var(--danger)"},children:S.error.message}),e.jsxs("ol",{style:{listStyle:"none",padding:0,margin:0,display:"grid",gap:10},children:[(Ee=(Ie=S.data)==null?void 0:Ie.data)==null?void 0:Ee.map((r,t)=>{const s=r.id?String(r.id):null,u=!!s,m=ha[t]||r.description||"";return e.jsx("li",{children:e.jsxs("button",{type:"button",disabled:!u,className:"pd-video-row",onClick:()=>{s&&x({id:s,caption:m||r.description||void 0,handle:r.handle??void 0,publishDate:r.publish_date??r.create_time??void 0,duration:r.duration??void 0,revenue:r.revenue??null,views:r.views??null,sale:r.sale??null,gpm:r.gpm??null})},children:[e.jsxs("div",{className:"pd-video-rank",children:["#",t+1]}),s?e.jsx("div",{className:"pd-video-thumb",children:e.jsx($a,{videoId:s,poster:null,alt:m||a("app.explorar.detalhe.criador.fallbackVideoTitle")})}):e.jsx("div",{className:"pd-video-thumb pd-video-thumb-empty"}),e.jsxs("div",{style:{display:"grid",gap:4,minWidth:0,flex:1},children:[e.jsx("div",{className:"pd-video-title",children:m||a("app.explorar.detalhe.produto.videoFallback")}),e.jsxs("div",{style:{display:"flex",gap:10,fontSize:12,opacity:.7,flexWrap:"wrap"},children:[Number(r.ad)===1&&e.jsxs("span",{className:"pd-video-ad",children:[e.jsx(Qe,{size:11,strokeWidth:2.2,"aria-hidden":"true"}),a("app.explorar.detalhe.produto.boosted.videoChip",{defaultValue:"Impulsionado"})]}),r.handle&&e.jsxs("span",{children:["@",r.handle]}),r.views!=null&&e.jsx("span",{children:a("app.explorar.detalhe.produto.videoMeta.viewsSuffix",{value:r.views})}),r.sale!=null&&e.jsx("span",{children:a("app.explorar.detalhe.produto.videoMeta.salesSuffix",{count:Number(r.sale)})}),r.revenue!=null&&e.jsxs("span",{children:[a("app.explorar.detalhe.produto.videoMeta.revenueLabel")," ",e.jsx("strong",{style:{color:"var(--brand-400, #FF8A3D)"},children:r.revenue})]}),r.publish_date&&e.jsxs("span",{children:["· ",r.publish_date]})]})]})]})},s??t)}),!S.isLoading&&!((Be=($e=S.data)==null?void 0:$e.data)!=null&&Be.length)&&e.jsx("li",{style:{opacity:.5},children:a("app.explorar.detalhe.produto.noVideos")})]})]}),k==="creators"&&e.jsxs("div",{className:"pd-quem-vende__panel",children:[U.isLoading&&e.jsx("ol",{style:{listStyle:"none",padding:0,margin:0,display:"grid",gap:10},"aria-busy":"true",children:Array.from({length:4}).map((r,t)=>e.jsxs("li",{className:"pd-video-row",style:{pointerEvents:"none"},children:[e.jsx("div",{className:"pd-video-rank",children:e.jsx(y,{variant:"text",width:20})}),e.jsx(y,{variant:"block",width:48,height:48,style:{borderRadius:"50%"}}),e.jsxs("div",{style:{display:"grid",gap:4,minWidth:0,flex:1},children:[e.jsx(y,{variant:"text",width:"55%"}),e.jsx(y,{variant:"text",width:"35%",height:11})]})]},t))}),e.jsxs("ol",{style:{listStyle:"none",padding:0,margin:0,display:"grid",gap:10},children:[ee.map((r,t)=>{const s=r.revenueSum>0?oe(r.revenueSum,n,{style:"currency",currency:"BRL",notation:"compact",maximumFractionDigits:1}):null,u=A(typeof r.followers=="number"?String(r.followers):r.followers),m=u!=null&&u>0?oe(u,n,{notation:"compact",maximumFractionDigits:1}):null,b=Xe(r.id),z=r.nickname||(r.handle?`@${r.handle}`:"â"),$=()=>{r.id&&p(`/explorar/criadores/${encodeURIComponent(r.id)}`)};return e.jsx("li",{children:e.jsxs("div",{className:"pd-video-row pd-creator-row",role:r.id?"button":void 0,tabIndex:r.id?0:void 0,onClick:r.i
3d?$:void 0,onKeyDown:r.id?M=>{(M.key==="Enter"||M.key===" ")&&(M.preventDefault(),$())}:void 0,style:r.id?{cursor:"pointer"}:void 0,children:[e.jsxs("div",{className:"pd-video-rank",children:["#",t+1]}),e.jsx("div",{className:"pd-creator-avatar",children:b?e.jsx("img",{src:b,alt:"",style:{width:"100%",height:"100%",objectFit:"cover",borderRadius:"50%"},onError:M=>{M.currentTarget.style.display="none"}}):e.jsx(Ge,{size:18,strokeWidth:1.5,"aria-hidden":"true"})}),e.jsxs("div",{style:{display:"grid",gap:4,minWidth:0,flex:1},children:[e.jsx("div",{className:"pd-video-title",children:z}),e.jsxs("div",{style:{display:"flex",gap:10,fontSize:12,opacity:.7,flexWrap:"wrap"},children:[m&&e.jsx("span",{children:a("app.explorar.detalhe.produto.whoSells.creatorFollowers",{count:u??0,followers:m,defaultValue:`${m} seguidores`})}),s&&e.jsxs("span",{children:[a("app.explorar.detalhe.produto.videoMeta.revenueLabel")," ",e.jsx("strong",{style:{color:"var(--brand-400, #FF8A3D)"},children:s})]})]})]})]})},r.id||r.handle||t)}),!U.isLoading&&ee.length===0&&e.jsx("li",{style:{opacity:.5},children:U.error?a("app.explorar.detalhe.produto.whoSells.creatorsUnavailable",{defaultValue:"Lista de criadores indisponÃvel para este produto no momento."}):a("app.explorar.detalhe.produto.whoSells.noCreators",{defaultValue:"Nenhum criador no perÃodo."})})]})]}),k==="lives"&&e.jsxs("div",{className:"pd-quem-vende__panel",children:[q.isLoading&&e.jsx("ol",{style:{listStyle:"none",padding:0,margin:0,display:"grid",gap:10},"aria-busy":"true",children:Array.from({length:3}).map((r,t)=>e.jsxs("li",{className:"pd-video-row",style:{pointerEvents:"none"},children:[e.jsx("div",{className:"pd-video-rank",children:e.jsx(y,{variant:"text",width:20})}),e.jsx(y,{variant:"block",width:56,height:56,style:{borderRadius:"50%"}}),e.jsxs("div",{style:{display:"grid",gap:4,minWidth:0,flex:1},children:[e.jsx(y,{variant:"text",width:"65%"}),e.jsx(y,{variant:"text",width:"40%",height:11})]})]},t))}),q.error&&e.jsx("p",{style:{color:"var(--danger)"},children:q.error.message}),e.jsxs("ol",{style:{listStyle:"none",padding:0,margin:0,display:"grid",gap:10},children:[(We=(Ke=q.data)==null?void 0:Ke.data)==null?void 0:We.map((r,t)=>{const s=r.uid?String(r.uid):null,m=r.screenshotUrl??r.screenshot_url??null??(s?Xe(s):null),b=()=>{s&&p(`/explorar/criadores/${encodeURIComponent(s)}`)};return e.jsx("li",{children:e.jsxs("button",{type:"button",disabled:!s,className:"pd-video-row pd-live-row",onClick:b,children:[e.jsxs("div",{className:"pd-video-rank",children:["#",t+1]}),e.jsxs("div",{className:"pd-live-thumb-wrap",children:[e.jsxs("div",{className:"pd-live-thumb",children:[m?e.jsx("img",{src:m,alt:"",loading:"lazy",onError:z=>{const $=z.currentTarget;$.style.display="none";const M=$.nextElementSibling;M&&(M.style.display="grid")}}):null,e.jsx("span",{className:"pd-live-fallback",style:{display:m?"none":"grid"},"aria-hidden":"true",children:e.jsx(He,{size:16,strokeWidth:1.6})})]}),e.jsx("span",{className:"pd-live-dot","aria-hidden":"true"})]}),e.jsxs("div",{style:{display:"grid",gap:4,minWidth:0,flex:1},children:[e.jsx("div",{className:"pd-video-title",children:r.title??a("app.explorar.detalhe.produto.liveFallback",{defaultValue:"Sem tÃtulo"})}),e.jsxs("div",{style:{display:"flex",gap:10,fontSize:12,opacity:.7,flexWrap:"wrap"},children:[r.handle&&e.jsxs("span",{children:["@",r.handle]}),r.duration&&e.jsx("span",{children:r.duration}),r.gpm&&e.jsxs("span",{children:["GPM ",e.jsx("strong",{children:String(r.gpm)})]}),r.revenue!=null&&e.jsxs("span",{children:[a("app.explorar.detalhe.produto.videoMeta.revenueLabel")," ",e.jsx("strong",{style:{color:"var(--brand-400, #FF8A3D)"},children:String(r.revenue)})]}),r.product_count!=null&&e.jsx("span",{children:a("app.explorar.detalhe.produto.liveMeta.productsSuffix",{count:r.product_count,defaultValue:`${r.product_count} produtos`})})]})]})]})},r.id??t)}),!q.isLoading&&!((Oe=(Ue=q.data)==null?void 0:Ue.data)!=null&&Oe.length)&&e.jsx("li",{style:{opacity:.5},children:a("app.explorar.detalhe.produto.noLives",{defaultValue:"Nenhuma live vendeu este produto no perÃodo."})})]})]}),k==="similar"&&e.jsx("div",{className:"pd-quem-vende__panel",children:o&&e.jsx(Rr,{product:o})})]}),e.jsx("style",{children:qr}),c&&e.jsx(Oa,{selected:c,sourceCountry:(o==null?void 0:o.country)??null,onClose:()=>x(null)}),xa&&J&&e.jsx(Dr,{blocks:J,onClose:()=>_e(!1)}),ga&&D&&e.jsx(Mr,{skus:D,onClose:()=>ye(!1)}),we!==null&&(()=>{var u;const r=(((u=le.data)==null?void 0:u.data)??[]).filter(m=>typeof m=="string"&&m.length>0),t=o&&(B(o.image_url)??de(o.source_id))||null,s=r.length>0?r:t?[t]:[];return s.length===0?null:e.jsx(Ba,{images:s,initialIndex:we,alt:X||((o==null?void 0:o.product_title)??""),onClose:()=>ke(null)})})()]})}function Dr({blocks:i,onClose:l}){const{t:p}=K();return v.useEffect(()=>{const a=document.body.style.overflow;document.body.style.overflow="hidden";function n(h){h.key==="Escape"&&l()}return document.addEventListener("keydown",n),()=>{document.body.style.overflow=a,document.removeEventListener("keydown",n)}},[l]),e.jsx("div",{className:"ds-modal-overlay",role:"dialog","aria-modal":"true","aria-label":p("app.explorar.detalhe.produto.desc.modalLabel",{defaultValue:"Descrição do produto"}),onClick:l,style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.72)",display:"grid",placeItems:"start center",padding:"clamp(16px, 4vh, 48px) clamp(12px, 3vw, 32px)",overflowY:"auto",zIndex:200},children:e.jsxs("div",{className:"ds-modal-card pd-desc-card",onClick:a=>a.stopPropagation(),children:[e.jsxs("div",{className:"pd-desc-head",children:[e.jsx("h3",{children:p("app.explorar.detalhe.produto.desc.modalTitle",{defaultValue:"Descrição do produto"})}),e.jsx("button",{type:"button",onClick:l,"aria-label":p("app.common.close",{defaultValue:"Fechar"}),className:"pd-desc-close",children:e.jsx(ra,{size:16})})]}),e.jsx("div",{className:"pd-desc-body",children:i.map((a,n)=>{const h=a??{},f=Array.isArray(h.sub)&&h.sub.length>0;return e.jsxs("div",{className:"pd-desc-block",children:[h.text&&e.jsx("p",{children:h.text}
3),f&&e.jsx("ul",{children:h.sub.map((d,c)=>e.jsxs("li",{children:[d.t&&e.jsxs("strong",{children:[d.t,": "]}),d.b]},c))})]},n)})})]})})}function Mr({skus:i,onClose:l}){const{t:p}=K();return v.useEffect(()=>{const a=document.body.style.overflow;document.body.style.overflow="hidden";function n(h){h.key==="Escape"&&l()}return document.addEventListener("keydown",n),()=>{document.body.style.overflow=a,document.removeEventListener("keydown",n)}},[l]),e.jsx("div",{className:"ds-modal-overlay",role:"dialog","aria-modal":"true","aria-label":p("app.explorar.detalhe.produto.sku.modalLabel",{defaultValue:"SKUs do produto"}),onClick:l,style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.72)",display:"grid",placeItems:"start center",padding:"clamp(16px, 4vh, 48px) clamp(12px, 3vw, 32px)",overflowY:"auto",zIndex:200},children:e.jsxs("div",{className:"ds-modal-card pd-sku-card",onClick:a=>a.stopPropagation(),children:[e.jsxs("div",{className:"pd-desc-head",children:[e.jsx("h3",{children:p("app.explorar.detalhe.produto.sku.modalTitle",{count:i.length,defaultValue:`SKUs do produto (${i.length})`})}),e.jsx("button",{type:"button",onClick:l,"aria-label":p("app.common.close",{defaultValue:"Fechar"}),className:"pd-desc-close",children:e.jsx(ra,{size:16})})]}),e.jsx("ul",{className:"pd-sku-list",children:i.map((a,n)=>{const h=a.sku_id??a.id??n,f=a.sku_name??a.name??"â",d=a.price_val??a.price??null,c=a.stock??null,x=a.images??a.image??null,k=typeof x=="string"?x:Array.isArray(x)&&typeof x[0]=="string"?x[0]:null,g=k?B(k)??k:null;return e.jsxs("li",{className:"pd-sku-item",children:[g?e.jsx("img",{src:g,alt:"",referrerPolicy:"no-referrer"}):e.jsx("div",{className:"pd-sku-item__thumb-empty"}),e.jsxs("div",{className:"pd-sku-item__body",children:[e.jsx("div",{className:"pd-sku-item__name",children:f}),e.jsxs("div",{className:"pd-sku-item__meta",children:[d!=null&&e.jsx("span",{children:String(d)}),c!=null&&e.jsx("span",{children:p("app.explorar.detalhe.produto.sku.stock",{count:c,n:c,defaultValue:`${c} em estoque`})})]})]})]},h)})})]})})}function L({label:i,value:l}){return e.jsxs("div",{className:"ds-fade-in pd-kpi",children:[e.jsx("span",{className:"pd-kpi__label",children:i}),e.jsx("span",{className:"pd-kpi__value",children:e.jsx(sr,{value:l})})]})}const Ze={padding:16,borderRadius:14,background:"var(--bg-card)",border:"1px solid var(--card-border)"},qr=` 4/* ===== Product card (header do produto: thumb + tÃtulo + rank + pricing). 5 Reorganizado a partir do Screenshot_772: antes era uma linha só com 6 flex-wrap misturando rank/sparkline/delta/receita/vendas/preço/comissão/ 7 rating â ilegÃvel. Agora: linha 1 identidade (rank + variação + rating), 8 linha 2 pricing (preço + comissão). Receita e vendas saÃram daqui 9 porque aparecem no painel "Principais métricas" logo abaixo. */ 10/* Card do produto em 2 colunas (desktop) / stack (mobile): 11 - Desktop â¥720px: imagem 330px fixa à esquerda + content full à direita 12 (tÃtulo + body inteiro: rank/rating, categoria, preço, meta, chips). 13 - Mobile <720px: imagem 100% width em cima, content embaixo. */ 14.pd-product-card { 15 display: grid; 16 grid-template-columns: 1fr; 17 gap: 14px; 18 padding: 16px; 19 border-radius: 14px; 20 background: var(--bg-card); 21 border: 1px solid var(--card-border); 22} 23.pd-product-card__media { 24 min-width: 0; 25} 26.pd-product-card__content { 27 display: grid; 28 gap: 10px; 29 min-width: 0; 30 align-content: start; 31} 32.pd-product-card__title { 33 margin: 0; 34 font-size: 18px; 35 font-weight: 700; 36 line-height: 1.3; 37 letter-spacing: -0.015em; 38 color: var(--text); 39 word-break: break-word; 40} 41.pd-product-card__body { 42 display: grid; 43 gap: 8px; 44 min-width: 0; 45} 46.pd-product-card__thumb--empty { 47 width: 100%; 48 aspect-ratio: 1 / 1; 49 border-radius: 12px; 50 background: var(--surface-2); 51} 52 53/* S2 â carrossel de imagens. Mobile: 100% width, aspect-ratio 1:1. 54 Desktop: lado-a-lado, imagem 180x180 fixa à esquerda. */ 55.pd-carousel { 56 position: relative; 57 width: 100%; 58 aspect-ratio: 1 / 1; 59 border-radius: 12px; 60 overflow: hidden; 61 background: var(--surface-2); 62 outline: none; 63} 64.pd-carousel:focus-visible { box-shadow: 0 0 0 2px rgba(244,109,17,0.5); } 65.pd-carousel--empty { background: var(--surface-2); } 66.pd-carousel__main-btn { 67 display: block; 68 width: 100%; 69 height: 100%; 70 padding: 0; 71 background: transparent; 72 border: 0; 73 cursor: zoom-in; 74 position: relative; 75} 76.pd-carousel__main-btn:disabled { cursor: default; } 77.pd-carousel__main { 78 width: 100%; 79 height: 100%; 80 object-fit: cover; 81 display: block; 82} 83.pd-carousel__zoom { 84 position: absolute; 85 top: 8px; 86 right: 8px; 87 width: 28px; 88 height: 28px; 89 border-radius: 8px; 90 background: rgba(0, 0, 0, 0.55); 91 color: #fff; 92 display: grid; 93 place-items: center; 94 opacity: 0; 95 transition: opacity var(--dur-fast, 140ms); 96 pointer-events: none; 97} 98.pd-carousel:hover .pd-carousel__zoom, 99.pd-carousel:focus-within .pd-carousel__zoom { opacity: 1; } 100/* Touch (sem hover): sempre visÃvel pra sinalizar interatividade. */ 101@media (hover: none) { 102 .pd-carousel__zoom { opacity: 0.85; } 103} 104.pd-carousel__nav { 105 position: absolute; 106 top: 50%; 107 transform: translateY(-50%); 108 width: 32px; 109 height: 32px; 110 border-radius: 50%; 111 background: rgba(0, 0, 0, 0.55); 112 color: #fff; 113 border: none; 114 display: grid; 115 place-items: center; 116 cursor: pointer; 117 opacity: 0; 118 transition: opacity var(--dur-fast, 140ms), background var(--dur-fast, 140ms); 119} 120.pd-carousel__nav:hover { background: rgba(0, 0, 0, 0.75); } 121.pd-carousel:hover .pd-carousel__nav, 122.pd-carousel:focus-within .pd-carousel__nav { opacity: 1; } 123@media (hover: none) { 124 .pd-carousel__nav { opacity: 0.85; } 125}
126.pd-carousel__nav--prev { left: 8px; } 127.pd-carousel__nav--next { right: 8px; } 128.pd-carousel__counter { 129 position: absolute; 130 top: 8px; 131 left: 8px; 132 padding: 3px 8px; 133 border-radius: 999px; 134 background: rgba(0, 0, 0, 0.55); 135 color: #fff; 136 font-size: 11px; 137 font-weight: 600; 138 font-variant-numeric: tabular-nums; 139 letter-spacing: 0.02em; 140} 141.pd-carousel__dots { 142 position: absolute; 143 bottom: 8px; 144 left: 0; 145 right: 0; 146 display: flex; 147 justify-content: center; 148 gap: 4px; 149 pointer-events: auto; 150} 151.pd-carousel__dot { 152 width: 6px; 153 height: 6px; 154 border-radius: 50%; 155 background: rgba(255, 255, 255, 0.45); 156 border: 0; 157 padding: 0; 158 cursor: pointer; 159 transition: background var(--dur-fast, 140ms), transform var(--dur-fast, 140ms); 160} 161.pd-carousel__dot.is-active { 162 background: #fff; 163 transform: scale(1.25); 164} 165 166/* Desktop: card vira 2 colunas. Imagem 330px à esquerda (50% maior que 167 os 220px anteriores). Conteúdo full ocupa a coluna direita. */ 168@media (min-width: 720px) { 169 .pd-product-card { 170 grid-template-columns: 330px 1fr; 171 gap: 22px; 172 } 173 .pd-product-card__title { font-size: 22px; } 174 .pd-carousel { width: 330px; } 175} 176@media (max-width: 720px) { 177 .pd-product-card__title { font-size: 16px; } 178} 179 180/* Linha "Loja XXX" entre o card do produto e as ações (Screenshot_776). 181 Estilo lista clicável (similar a uma row de menu iOS): avatar pequeno, 182 nome, chevron à direita. Hover sutil. */ 183.pd-shop-link { 184 display: flex; 185 align-items: center; 186 gap: 12px; 187 padding: 12px 14px; 188 border-radius: 12px; 189 background: var(--bg-card); 190 border: 1px solid var(--card-border); 191 color: var(--text); 192 text-decoration: none; 193 cursor: pointer; 194 transition: background var(--dur-fast), border-color var(--dur-fast); 195} 196.pd-shop-link:hover { 197 background: var(--surface-2); 198 border-color: var(--border-strong); 199} 200/* Variante estática: aparece quando temos info da loja vinda do 201 ProductDetail mas a loja ainda não foi sincronizada em 202 market_top_shops, então não dá pra navegar. Sem hover/cursor. */ 203.pd-shop-link--static { 204 cursor: default; 205} 206.pd-shop-link--static:hover { 207 background: var(--bg-card); 208 border-color: var(--card-border); 209} 210.pd-shop-link__avatar { 211 width: 32px; 212 height: 32px; 213 border-radius: 8px; 214 object-fit: cover; 215 background: var(--surface-2); 216 flex-shrink: 0; 217} 218.pd-shop-link__avatar--fallback { 219 display: grid; 220 place-items: center; 221 color: var(--text-muted); 222} 223/* Container de texto: nome em cima + meta sutil embaixo. Antes o nome 224 era flex:1 direto na row â sem espaço pra sub-linha. */ 225.pd-shop-link__text { 226 flex: 1; 227 min-width: 0; 228 display: grid; 229 gap: 2px; 230} 231.pd-shop-link__name { 232 font-size: 14px; 233 font-weight: 600; 234 white-space: nowrap; 235 overflow: hidden; 236 text-overflow: ellipsis; 237 color: var(--text); 238} 239/* Meta sutil: rank + receita + badges (full service / overseas). Cor 240 text-dim pra não competir com o nome. Badges inline pequenos como pill 241 cinza-claro. */ 242.pd-shop-link__meta { 243 display: inline-flex; 244 align-items: center; 245 flex-wrap: wrap; 246 gap: 6px; 247 font-size: 11.5px; 248 color: var(--text-dim); 249 line-height: 1.3; 250} 251.pd-shop-link__badge { 252 display: inline-flex; 253 align-items: center; 254 padding: 1px 6px; 255 border-radius: 999px; 256 background: var(--surface-2); 257 border: 1px solid var(--hairline-1); 258 color: var(--text-muted); 259 font-size: 10.5px; 260 font-weight: 500; 261 letter-spacing: 0.02em; 262} 263.pd-shop-link__chev { 264 color: var(--text-dim); 265 flex-shrink: 0; 266 align-self: center; 267} 268 269/* Linha única de ações: TikTok + Salvar + Criar roteiro lado a lado. 270 Mesma altura visual em todos os itens. Em mobile o label "Ver no 271 TikTok" encolhe pra "TikTok" (esconde label-long via media query). */ 272.pd-actions-row { 273 display: flex; 274 flex-wrap: wrap; 275 gap: 8px; 276 align-items: stretch; 277} 278.pd-actions-row__chip { 279 display: inline-flex; 280 align-items: center; 281 gap: 6px; 282} 283.pd-actions-row__label-long { display: inline; } 284.pd-actions-row__label-short { display: none; } 285@media (max-width: 480px) { 286 .pd-actions-row__label-long { display: none; } 287 .pd-actions-row__label-short { display: inline; } 288} 289.pd-actions-row__cta { 290 /* Sempre alinhado à direita â extremidade oposta dos chips. Quando a
291 row tem espaço, fica colado na borda direita; quando faltar espaço 292 e flex-wrap quebrar, cai pra próxima linha mantendo o alinhamento. */ 293 margin-left: auto; 294 border-radius: 999px; 295 padding: 8px 16px; 296 font-size: 13.5px; 297 white-space: nowrap; 298 display: inline-flex; 299 align-items: center; 300 gap: 6px; 301} 302@media (max-width: 720px) { 303 /* Hit area um pouquinho maior em mobile. */ 304 .pd-actions-row__cta { padding: 10px 18px; font-size: 14px; } 305} 306 307/* Loja + Action row DENTRO do .pd-product-card__content (movidos pra 308 preencher o espaço vazio ao lado da foto 330px em desktop). Visual 309 ajustado: a Loja vira uma "row inline" com border-top como divisor 310 (em vez de card próprio), e a Action row é empurrada pro fundo do 311 content via margin-top:auto pra alinhar com a base da foto. */ 312.pd-product-card__content .pd-shop-link { 313 background: transparent; 314 border: 0; 315 border-top: 1px solid var(--hairline-1); 316 border-radius: 0; 317 padding: 12px 0 0; 318} 319.pd-product-card__content .pd-shop-link:hover { 320 background: transparent; 321} 322.pd-product-card__content .pd-actions-row { 323 margin-top: auto; 324 padding-top: 4px; 325} 326@media (min-width: 720px) { 327 /* Garante que a coluna direita tenha pelo menos a altura da foto pra 328 o margin-top:auto da action row funcionar (alinha a base com a foto). */ 329 .pd-product-card__content { min-height: 330px; } 330} 331.pd-product-card__row { 332 display: flex; 333 align-items: center; 334 gap: 10px; 335 flex-wrap: wrap; 336 font-size: 12px; 337 color: var(--text-muted); 338} 339.pd-product-card__rank { 340 font-weight: 600; 341 color: var(--text); 342 padding: 2px 8px; 343 border-radius: 999px; 344 background: var(--surface-2); 345 border: 1px solid var(--hairline-1); 346 font-size: 11.5px; 347} 348.pd-product-card__rating { 349 display: inline-flex; 350 align-items: center; 351 gap: 4px; 352 color: var(--text); 353 font-weight: 600; 354} 355.pd-product-card__rating svg { color: #F5B63C; } 356.pd-product-card__price { 357 font-weight: 600; 358 color: var(--text); 359 font-size: 13px; 360} 361.pd-product-card__commission { color: var(--text-dim); } 362 363/* Linha de meta info no card â discreta, dados em formato "Label: Valor" 364 separados por "·" implÃcito (via gap). Comissão, lançamento, faixa 365 de preço â qualquer um pode estar ausente. */ 366.pd-meta-line { 367 display: flex; 368 flex-wrap: wrap; 369 gap: 4px 14px; 370 margin-top: 4px; 371 font-size: 12.5px; 372 color: var(--text-dim); 373} 374.pd-meta-item { 375 display: inline-flex; 376 align-items: baseline; 377 gap: 6px; 378} 379.pd-meta-item__label { font-weight: 500; } 380.pd-meta-item__value { 381 color: var(--text); 382 font-weight: 600; 383} 384.pd-meta-item__sub { 385 color: var(--text-dim); 386 font-weight: 500; 387} 388.pd-meta-item--soft { opacity: 0.7; } 389 390/* S1.T1 â contagem de avaliações ao lado da rating, em tom muted. */ 391.pd-product-card__rating-count { 392 font-weight: 500; 393 color: var(--text-dim); 394 margin-left: 2px; 395} 396 397/* S1.T2 â breadcrumb de categoria abaixo do tÃtulo. */ 398.pd-category-path { 399 display: inline-flex; 400 align-items: center; 401 flex-wrap: wrap; 402 gap: 4px; 403 font-size: 11.5px; 404 color: var(--text-muted); 405 margin-top: 2px; 406} 407.pd-category-path__node { 408 display: inline-flex; 409 align-items: center; 410 gap: 4px; 411} 412.pd-category-path__node svg { 413 color: var(--text-dim); 414 opacity: 0.7; 415} 416 417/* S1.T3/T4 â chips compactos pra abrir descrição/SKUs. */ 418.pd-doc-chips { 419 display: inline-flex; 420 flex-wrap: wrap; 421 gap: 6px; 422 margin-top: 6px; 423} 424.pd-doc-chip { 425 font: inherit; 426 font-size: 12px; 427 font-weight: 600; 428 color: var(--text-muted); 429 background: var(--surface-2); 430 border: 1px solid var(--hairline-2); 431 border-radius: 999px; 432 padding: 4px 10px; 433 cursor: pointer; 434 transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); 435} 436.pd-doc-chip:hover { 437 color: var(--text); 438 border-color: var(--border); 439 background: var(--bg-card); 440} 441.pd-doc-chip:focus-visible { 442 outline: 2px solid rgba(244,109,17,0.5); 443 outline-offset: 2px; 444} 445 446/* Modais de Descrição e SKUs â herdam .ds-modal-card padrão. */ 447.pd-desc-card, 448.pd-sku-card { 449 width: 100%; 450 max-width: 720px; 451 background: var(--bg); 452 border: 1px solid var(--border-strong); 453 border-radius: 16px; 454 padding: clamp(16px, 3vh, 24px); 455 box-shadow: var(--shadow-lg); 456 display: grid; 457 gap: 14px; 458} 459.pd-desc-head { 460 display: flex; 461 align-items: center; 462 justify-content: space-between; 463 gap: 12px; 464 padding-bottom: 10px; 465 border-bottom: 1px solid var(--hairline-2); 466} 467.pd-desc-head h3 { 468 margin: 0; 469 font-size: 15px; 470 font-weight: 700; 471 letter-spacing: -0.005em; 472} 473.pd-desc-close { 474 background: transparent; 475 border: 1px solid var(--border, rgba(127,127,127,0.18)); 476 color: inherit; 477 border-radius: 8px; 478 padding: 6px; 479 cursor: pointer; 480 display: inline-flex; 481 align-items: center; 482 justify-content: center; 483} 484.pd-desc-body { 485 font-size: 13.5px; 486 line-height: 1.55; 487 color: var(--text); 488 display: grid; 489 gap: 12px; 490 max-height: 60vh; 491 overflow-y: auto; 492} 493.pd-desc-block p { margin: 0 0 6px; } 494.pd-desc-block ul { 495 list-style: disc; 496 padding-left: 18px; 497 display: grid; 498 gap: 4px; 499} 500.pd-desc-block li strong { 501 color: var(--text); 502 font-weight: 600; 503} 504 505.pd-sku-list { 506 list-style: none; 507 padding: 0; 508 margin: 0; 509 display: grid; 510 gap: 8px; 511 max-height: 65vh; 512 overflow-y: auto; 513} 514.pd-sku-item { 515 display: flex; 516 align-items: center; 517 gap: 12px; 518 padding: 8px 10px; 519 border-radius: 10px; 520 background: var(--surface-1); 521 border: 1px solid var(--hairline-1); 522} 523.pd-sku-item img, 524.pd-sku-item__thumb-empty { 525 width: 48px; 526 height: 48px; 527 border-radius: 8px; 528 object-fit: cover; 529 background: var(--surface-2); 530 flex-shrink: 0; 531} 532.pd-sku-item__body { 533 display: grid; 534 gap: 2px; 535 min-width: 0; 536 flex: 1; 537} 538.pd-sku-item__name { 539 font-size: 13px; 540 font-weight: 600; 541 color: var(--text); 542 overflow: hidden; 543 text-overflow: ellipsis; 544 white-space: nowrap; 545} 546.pd-sku-item__meta { 547 font-size: 12px; 548 color: var(--text-dim); 549 display: inline-flex; 550 gap: 10px; 551 flex-wrap: wrap; 552} 553 554/* S3 â CaracterÃsticas-chave (highlights). Pills compactas espaçadas. */ 555.pd-highlights { 556 list-style: none; 557 margin: 0; 558 padding: 0; 559 display: flex; 560 flex-wrap: wrap; 561 gap: 6px; 562} 563.pd-highlights__pill { 564 display: inline-flex; 565 align-items: center; 566 padding: 5px 10px; 567 border-radius: 999px; 568 background: var(--surface-2); 569 border: 1px solid var(--hairline-1); 570 color: var(--text); 571 font-size: 12px; 572 font-weight: 500; 573} 574 575/* S3 â Atributos (definition list 2 colunas em desktop). */ 576.pd-attributes { 577 margin: 0; 578 display: grid; 579 grid-template-columns: 1fr; 580 gap: 6px 18px; 581} 582@media (min-width: 720px) { 583 .pd-attributes { grid-template-columns: 1fr 1fr; } 584} 585.pd-attributes__row { 586 display: grid; 587 grid-template-columns: minmax(110px, max-content) 1fr; 588 gap: 8px; 589 padding: 6px 0; 590 border-bottom: 1px solid var(--hairline-1); 591 font-size: 12.5px; 592} 593.pd-attributes__row dt { 594 color: var(--text-dim); 595 font-weight: 600; 596} 597.pd-attributes__row dd { 598 margin: 0; 599 color: var(--text); 600} 601 602/* Espaçamento compacto no topo da página de produto. O .explore-page 603 global tem padding-top 40px + gap 48px entre filhos â em detalhe de 604 produto isso cria um vão visÃvel entre o back-chip e o card. 605 606 Em mobile (â¤767px) o DetailHeader é sticky no topo (top:0) â deixar 607 padding-top maior que 0 cria um vão entre o TrialBanner sticky e o 608 header. A regra global .explore-page:has(> .detail-header) já zera, 609 mas perde em especificidade pra main.explore-page.pd-detalhe. Por 610 isso replicamos o reset aqui. */ 611main.explore-page.pd-detalhe { 612 padding-top: 0; 613 gap: var(--s-5); 614} 615@media (min-width: 768px) { 616 main.explore-page.pd-detalhe { 617 padding-top: var(--s-5); 618 } 619} 620@media (min-width: 1100px) { 621 main.explore-page.pd-detalhe { 622 padding-top: var(--s-6); 623 gap: var(--s-6); 624 } 625} 626 627/* Layout 2-col em desktop â¥1100px â cada bloco lógico (chart + KPIs, 628 donut + GMV, caracterÃsticas + atributos) ocupa a largura inteira da 629 viewport, mas pareando dois conteúdos relacionados em vez de empilhar 630 tudo. Em mobile/tablet cai pra coluna única naturalmente. */ 631.pd-twocol { 632 display: grid; 633 gap: 16px; 634} 635/* Pares simétricos (donut+GMV, caracterÃsticas+atributos) são compactos e 636 cabem lado a lado bem antes dos 1100px do par analytics (chart grande + 637 stat-list). Pareamos a partir de 900px pra cobrir laptops/janelas não 638 maximizadas â antes empilhava em telas ~1024px que o usuário lê como 639 "desktop". O par --analytics continua exigindo â¥1100px (precisa de mais 640 largura pro chart + lista de KPIs). */ 641@media (min-width: 900px) { 642 .pd-twocol--symmetric { 643 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 644 align-items: stretch; 645 } 646} 647@media (min-width: 1100px) { 648 .pd-twocol--analytics { 649 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 650 align-items: stretch; 651 } 652 /* Chart à esquerda estica até a altura da stat-list dinâmica à direita. 653 Cadeia: .pd-chart-wrap height:100% + .prc flex column + .prc__chart 654 flex:1 + ResponsiveContainer height="100%" (passado via prop no JSX). */ 655 .pd-twocol--analytics > .pd-chart-wrap { 656 height: 100%; 657 display: flex; 658 flex-direction: column; 659 min-width: 0; 660 } 661 .pd-twocol--analytics > .pd-chart-wrap > .prc { 662 flex: 1; 663 display: flex; 664 flex-direction: column; 665 min-height: 0; 666 } 667 .pd-twocol--analytics > .pd-chart-wrap > .prc > .prc__chart { 668 flex: 1; 669 min-height: 0; 670 } 671 /* Stat-list ocupa a coluna direita inteira pra alinhar com a base do chart. */ 672 .pd-twocol--analytics > .pd-kpis { 673 height: 100%; 674 } 675} 676 677/* Section "Principais métricas" â gap entre o header (tÃtulo + PeriodPicker) 678 e o twocol interno. */ 679.pd-metrics-section { 680 margin-top: 18px; 681 display: grid; 682 gap: 12px; 683} 684 685/* Bloco genérico usado dentro dos pd-twocol simétricos: tÃtulo + 686 conteúdo, com gap consistente. */ 687.pd-block { 688 display: grid; 689 gap: 10px; 690 min-width: 0; 691 align-self: start; 692} 693.pd-block__title { 694 margin: 0; 695 font-size: 12.5px; 696 font-weight: 600; 697 color: var(--text-dim); 698 text-transform: uppercase; 699 letter-spacing: 0.06em; 700} 701 702.pd-channels-row, 703.pd-traits-row { margin-top: 22px; } 704 705/* ===== Mapa de ângulos ===== Bloco de leitura, não de números: cartão 706 discreto com as duas colunas do .pd-twocol--symmetric dentro. Só tokens 707 (--surface/--hairline/--text-dim) porque a página tem light mode. */ 708.pd-angles { 709 margin-top: 22px; 710 display: grid; 711 gap: 14px; 712 padding: 16px; 713 border: 1px solid var(--hairline-1); 714 border-radius: 14px; 715 background: var(--surface-1); 716} 717.pd-angles__head { display: grid; gap: 4px; } 718.pd-angles__subtitle { 719 margin: 0; 720 font-size: 12.5px; 721 line-height: 1.45; 722 color: var(--text-dim); 723} 724.pd-angles__coltitle { 725 margin: 0; 726 font-size: 12px; 727 font-weight: 600; 728 letter-spacing: 0.04em; 729 text-transform: uppercase; 730 color: var(--text-dim); 731} 732.pd-angles__list { 733 margin: 0; 734 padding: 0; 735 list-style: none; 736 display: grid; 737 gap: 8px; 738} 739.pd-angles__item { 740 display: grid; 741 gap: 3px; 742 padding: 10px 12px; 743 border-radius: 10px; 744 border: 1px solid var(--hairline-1); 745 background: var(--surface-2); 746} 747/* Espaço livre é a recomendação, então ganha a borda esquerda de destaque 748 em vez de cor de fundo (que brigaria com o light mode). */ 749.pd-angles__item--gap { border-left: 3px solid var(--brand-500); } 750.pd-angles__angle { 751 font-size: 13.5px; 752 font-weight: 600; 753 line-height: 1.35; 754} 755.pd-angles__count { 756 font-size: 11.5px; 757 color: var(--text-dim); 758 font-variant-numeric: tabular-nums; 759} 760.pd-angles__example { 761 font-size: 12px; 762 line-height: 1.45; 763 color: var(--text-dim); 764} 765.pd-angles__loading { display: grid; gap: 8px; } 766.pd-angles__note { 767 margin: 0; 768 font-size: 12.5px; 769 line-height: 1.5; 770 color: var(--text-dim); 771} 772.pd-angles__retry { 773 background: none; 774 border: 0; 775 padding: 0; 776 font: inherit; 777 color: var(--brand-500); 778 cursor: pointer; 779 text-decoration: underline; 780} 781.pd-angles__hint { 782 margin: 0; 783 font-size: 11.5px; 784 line-height: 1.45; 785 color: var(--text-dim); 786 border-top: 1px solid var(--hairline-1); 787 padding-top: 10px; 788} 789 790/* ===== KPIs ===== Em mobile/tablet o grid de KPIs continua sendo cards 791 quadrados (auto-fit minmax 180px). Em desktop dentro de 792 .pd-twocol--analytics ele se transforma em uma "stat list" densa 793 à direita do chart â label à esquerda, valor com tabular numbers à 794 direita, hairline entre linhas, sem cards/shadow. Resolve o problema 795 do grid 6+1 órfão que aparecia quando o bloco ocupava a largura toda. */ 796.pd-kpis { 797 display: grid; 798 gap: 10px; 799 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 800 min-width: 0; 801} 802.pd-kpi { 803 display: grid; 804 gap: 4px; 805 padding: 12px 14px; 806 border-radius: 10px; 807 background: var(--bg-card); 808 border: 1px solid var(--card-border); 809 box-shadow: var(--shadow-sm); 810 min-width: 0; 811} 812.pd-kpi--skeleton { 813 background: var(--surface-1); 814 border-color: var(--hairline-1); 815 box-shadow: none; 816} 817.pd-kpi__label { 818 font-size: 11px; 819 color: var(--text-dim); 820 text-transform: uppercase; 821 letter-spacing: 0.08em; 822} 823.pd-kpi__value { 824 font-size: 18px; 825 font-weight: 700; 826 font-variant-numeric: tabular-nums; 827 color: var(--text); 828 /* Valor longo (ex.: número cru) não pode estourar a coluna e cortar o painel. */ 829 min-width: 0;
830 overflow-wrap: anywhere; 831} 832 833@media (min-width: 1100px) { 834 .pd-twocol--analytics .pd-kpis { 835 grid-template-columns: 1fr; 836 gap: 0; 837 padding: 4px 16px; 838 background: var(--bg-card); 839 border: 1px solid var(--card-border); 840 border-radius: 12px; 841 box-shadow: var(--shadow-sm); 842 } 843 .pd-twocol--analytics .pd-kpi { 844 display: flex; 845 justify-content: space-between; 846 align-items: baseline; 847 gap: 14px; 848 padding: 11px 0; 849 border: 0; 850 border-bottom: 1px solid var(--hairline-1); 851 border-radius: 0; 852 background: transparent; 853 box-shadow: none; 854 } 855 .pd-twocol--analytics .pd-kpi:last-child { border-bottom: 0; } 856 .pd-twocol--analytics .pd-kpi__label { 857 font-size: 12.5px; 858 text-transform: none; 859 letter-spacing: 0; 860 color: var(--text-dim); 861 font-weight: 500; 862 white-space: nowrap; 863 overflow: hidden; 864 text-overflow: ellipsis; 865 /* Encolhe e trunca pra SEMPRE sobrar espaço pro valor (antes o label nowrap 866 sem shrink empurrava o valor pra fora da viewport â painel "cortado"). */ 867 flex: 1 1 auto; 868 min-width: 0; 869 } 870 .pd-twocol--analytics .pd-kpi__value { 871 font-size: 15px; 872 font-weight: 700; 873 white-space: nowrap; 874 flex: 0 0 auto; 875 text-align: right; 876 } 877 .pd-twocol--analytics .pd-kpi--skeleton { 878 display: grid; 879 gap: 4px; 880 } 881} 882 883/* Hero da tendência: card vertical do topo das "Principais métricas". 884 Linha 1 = label "Tendência da receita" + delta percentual colorido. 885 Linha 2 = sparkline ocupando a largura inteira do card (fluid), 886 72px de altura. Antes era flex-row com sparkline 140Ã36 espremido 887 no canto direito (Screenshot_784); virou hero vertical pra dar 888 presença ao gráfico â é o resumo que o user lê primeiro. */ 889.pd-trend-hero { 890 display: grid; 891 gap: 12px; 892 padding: 14px 16px 16px; 893 border-radius: 12px; 894 background: var(--surface-1); 895 border: 1px solid var(--hairline-1); 896} 897.pd-trend-hero__row { 898 display: inline-flex; 899 align-items: baseline; 900 gap: 10px; 901 flex-wrap: wrap; 902 min-width: 0; 903} 904.pd-trend-hero__chart { 905 width: 100%; 906 min-width: 0; 907} 908.pd-trend-hero__label { 909 font-size: 12.5px; 910 color: var(--text-dim); 911 text-transform: uppercase; 912 letter-spacing: 0.06em; 913 font-weight: 600; 914} 915.pd-trend-hero__growth { 916 font-size: 14px; 917 font-weight: 700; 918 font-variant-numeric: tabular-nums; 919} 920.pd-trend-hero__growth--up { color: var(--success, #34D399); } 921.pd-trend-hero__growth--down { color: var(--danger, #FF6B6B); } 922.pd-trend-hero__growth--flat { color: var(--text-dim); } 923 924/* Header da seção "Principais métricas": tÃtulo à esquerda + PeriodPicker 925 à direita na mesma linha. Antes o PeriodPicker era uma row sozinho, 926 ficava isolado como hero solitário (Screenshot_784). Agora vira chip 927 discreto colado no tÃtulo da seção que ele filtra. */ 928.pd-metrics-head { 929 display: flex; 930 align-items: center; 931 justify-content: space-between; 932 gap: 12px; 933 flex-wrap: wrap; 934} 935.pd-metrics-head__title { 936 margin: 0; 937 font-size: 13px; 938 font-weight: 600; 939 color: var(--text); 940 opacity: 0.7; 941 text-transform: uppercase; 942 letter-spacing: 0.08em; 943} 944 945/* "Quem vende este produto" â seção unificada com sub-tabs de 3 abas 946 (VÃdeos / Criadores / Lives). Substitui as 3 sections empilhadas que 947 tinha antes; agrupa pra reduzir scroll e dar foco no que o user quer 948 ver agora. */ 949.pd-quem-vende { 950 display: grid; 951 gap: 14px; 952} 953.pd-quem-vende__panel { display: contents; } 954 955/* ===== Faixa "a loja impulsiona" (GMV Max) ===== Leitura, não número: cartão 956 discreto na mesma famÃlia do .pd-angles. Só tokens, porque a página tem light 957 mode e rgba(255,255,255,x) apagaria o texto lá. */ 958.pd-boosted { 959 display: flex; 960 gap: 12px; 961 align-items: flex-start; 962 padding: 12px 14px; 963 border: 1px solid var(--hairline-1); 964 /* Borda esquerda de destaque em vez de fundo colorido: o mesmo recurso que o 965 mapa de ângulos usa pra dar ênfase sem brigar com o tema claro. */ 966 border-left: 3px solid var(--brand-500); 967 border-radius: 12px; 968 background: var(--surface-1); 969} 970/* Sem verba da loja a faixa continua informando, mas perde o destaque: é a 971 leitura neutra, não uma oportunidade. */ 972.pd-boosted--none { border-left-color: var(--hairline-1); } 973.pd-boosted__icon { 974 display: grid; 975 place-items: center; 976 width: 30px; 977 height: 30px; 978 flex-shrink: 0; 979 border-radius: 9px; 980 background: var(--surface-2); 981 border: 1px solid var(--hairline-1); 982 color: var(--brand-400, #FF8A3D); 983} 984.pd-boosted--none .pd-boosted__icon { color: var(--text-dim); } 985.pd-boosted__text { display: grid; gap: 3px; min-width: 0; } 986.pd-boosted__badge { 987 font-size: 11px; 988 font-weight: 600; 989 letter-spacing: 0.06em; 990 text-transform: uppercase; 991 color: var(--text-dim); 992} 993.pd-boosted__line { 994 margin: 0; 995 font-size: 13.5px; 996 font-weight: 600; 997 line-height: 1.35; 998} 999.pd-boosted__hint { 1000 margin: 0; 1001 font-size: 12px; 1002 line-height: 1.45; 1003 color: var(--text-dim); 1004} 1005 1006/* Chip na linha do vÃdeo â contraparte auditável da faixa. */ 1007.pd-video-ad { 1008 display: inline-flex; 1009 align-items: center; 1010 gap: 4px; 1011 padding: 1px 7px; 1012 border-radius: 999px; 1013 border: 1px solid var(--hairline-1); 1014 background: var(--surface-2); 1015 color: var(--brand-400, #FF8A3D); 1016 font-size: 11px; 1017 font-weight: 600; 1018} 1019 1020/* As sub-abas (VÃdeos/Criadores/Lives/Parecidos) usam o componente 1021 compartilhado <ContentTabs> (.content-tabs) â mesmo estilo bleed-to-edge 1022 da nav /explorar. O CSS vive lá, não aqui. */ 1023 1024/* Linha de criador (aba Criadores): mesmo shape do .pd-video-row mas
1025 com avatar circular como placeholder (sem detalhe de UID ainda pra 1026 linkar o perfil â quando o endpoint /product/detail/creator/queryList 1027 ter hook, os cards viram clicáveis e ganham avatar real). */ 1028.pd-creator-row { 1029 cursor: default; 1030} 1031.pd-creator-row:hover { background: var(--bg-card); } 1032.pd-creator-avatar { 1033 width: 48px; 1034 height: 48px; 1035 border-radius: 50%; 1036 background: var(--surface-2); 1037 border: 1px solid var(--hairline-1); 1038 display: grid; 1039 place-items: center; 1040 color: var(--text-dim); 1041 flex-shrink: 0; 1042} 1043 1044/* S4 â Chart container. */ 1045.pd-chart-wrap { 1046 position: relative; 1047 padding: 10px 14px 6px; 1048 border-radius: 12px; 1049 background: var(--surface-1); 1050 border: 1px solid var(--hairline-1); 1051} 1052.pd-chart-growth { 1053 position: absolute; 1054 top: 12px; 1055 right: 16px; 1056 font-size: 13px; 1057 font-weight: 700; 1058 font-variant-numeric: tabular-nums; 1059 background: var(--bg-card); 1060 border-radius: 999px; 1061 padding: 2px 10px; 1062 border: 1px solid var(--hairline-1); 1063} 1064.pd-chart-growth--up { color: var(--success, #34D399); } 1065.pd-chart-growth--down { color: var(--danger, #FF6B6B); } 1066.pd-chart-growth--flat { color: var(--text-dim); } 1067.pd-chart-growth__sub {
1068 color: var(--text-dim); 1069 font-size: 11px; 1070 font-weight: 500; 1071 margin-left: 4px; 1072 text-transform: uppercase; 1073 letter-spacing: 0.06em; 1074} 1075 1076.prc { 1077 display: grid; 1078 gap: 6px; 1079} 1080.prc__head { 1081 display: flex; 1082 align-items: center; 1083 justify-content: space-between; 1084 gap: 8px; 1085} 1086.prc__head h4 { 1087 margin: 0; 1088 font-size: 13px; 1089 opacity: 0.7; 1090 text-transform: uppercase; 1091 letter-spacing: 0.08em; 1092 font-weight: 600; 1093} 1094.prc__chart { 1095 width: 100%; 1096 /* Fallback de altura pra mobile: o ResponsiveContainer com height="100%" 1097 colapsa quando o pai não tem altura definida. Desktop â¥1100px sobrescreve 1098 pra flex:1 + min-height:0 dentro do pd-twocol--analytics. */ 1099 min-height: 220px; 1100} 1101/* Tooltip customizado do recharts. Mantém visual cohesive com a Domma 1102 em vez do branco padrão. */ 1103.prc__tooltip { 1104 background: var(--bg-card); 1105 border: 1px solid var(--border, var(--hairline-2)); 1106 border-radius: 10px; 1107 padding: 8px 10px; 1108 box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.18)); 1109 display: grid; 1110 gap: 5px; 1111 min-width: 140px; 1112} 1113.prc__tooltip-date { 1114 font-size: 11px; 1115 color: var(--text-dim); 1116 text-transform: uppercase; 1117 letter-spacing: 0.06em; 1118 font-weight: 600; 1119 border-bottom: 1px solid var(--hairline-1); 1120 padding-bottom: 4px; 1121} 1122.prc__tooltip-row { 1123 display: grid; 1124 grid-template-columns: 10px 1fr auto; 1125 align-items: center; 1126 gap: 6px; 1127 font-size: 12px; 1128} 1129.prc__tooltip-swatch { 1130 width: 10px; 1131 height: 10px; 1132 border-radius: 50%; 1133} 1134.prc__tooltip-label { 1135 color: var(--text-dim); 1136 font-weight: 500; 1137} 1138.prc__tooltip-value { 1139 color: var(--text); 1140 font-weight: 700; 1141 font-variant-numeric: tabular-nums; 1142} 1143.prc__legend { 1144 list-style: none; 1145 margin: 0; 1146 padding: 4px 0 0; 1147 display: inline-flex; 1148 flex-wrap: wrap; 1149 gap: 12px; 1150 font-size: 11.5px; 1151 color: var(--text-dim); 1152} 1153.prc__legend-item { 1154 display: inline-flex; 1155 align-items: center; 1156 gap: 5px; 1157} 1158.prc__legend-swatch { 1159 display: inline-block; 1160 width: 10px; 1161 height: 10px; 1162 border-radius: 50%; 1163} 1164.prc--empty { 1165 padding: 40px 14px; 1166 text-align: center; 1167 color: var(--text-dim); 1168 font-size: 13px; 1169 border-radius: 12px; 1170 background: var(--surface-1); 1171 border: 1px dashed var(--hairline-2); 1172} 1173.prc--loading { 1174 border-radius: 12px; 1175 overflow: hidden; 1176 background: var(--surface-1); 1177 position: relative; 1178} 1179.prc__skeleton { 1180 position: absolute; 1181 inset: 0; 1182 background: linear-gradient(90deg, transparent, var(--surface-2), transparent); 1183 animation: prc-shimmer 1.4s linear infinite; 1184} 1185@keyframes prc-shimmer { 1186 0% { transform: translateX(-100%); } 1187 100% { transform: translateX(100%); } 1188} 1189 1190@media (max-width: 720px) { 1191 .pd-product-card__thumb { width: 80px; height: 80px; } 1192 .pd-product-card__title { font-size: 15px; } 1193 .pd-product-card__row { gap: 8px; } 1194 .pd-trend-hero { padding: 8px 12px; } 1195 .pd-trend-hero__growth { font-size: 13px; } 1196} 1197 1198/* Live row â espelha pd-video-row mas com thumb circular do creator 1199 (avatar) + dot vermelho. Ãcone Radio como fallback. 1200 1201 Estrutura: .pd-live-thumb-wrap (relative, sem overflow) > .pd-live-thumb 1202 (overflow:hidden recortando a imagem em cÃrculo) + .pd-live-d
1202ot (sibling 1203 do thumb, fora do recorte pra aparecer inteiro mesmo "mordendo" a borda). */ 1204.pd-live-row .pd-live-thumb-wrap { 1205 position: relative; 1206 width: 56px; 1207 height: 56px; 1208 flex-shrink: 0; 1209} 1210.pd-live-row .pd-live-thumb { 1211 position: relative; 1212 width: 100%; 1213 height: 100%; 1214 border-radius: 50%; 1215 overflow: hidden; 1216 background: var(--surface-3, var(--surface-2)); 1217 border: 1px solid var(--hairline-1, var(--border)); 1218 display: grid; 1219 place-items: center; 1220} 1221.pd-live-row .pd-live-thumb img { 1222 width: 100%; 1223 height: 100%; 1224 object-fit: cover; 1225 display: block; 1226 position: absolute; 1227 inset: 0; 1228} 1229.pd-live-fallback { 1230 display: grid; 1231 place-items: center; 1232 width: 100%; 1233 height: 100%; 1234 color: var(--text-dim); 1235} 1236.pd-live-dot { 1237 position: absolute; 1238 bottom: -1px; 1239 right: -1px; 1240 width: 12px; 1241 height: 12px; 1242 border-radius: 50%; 1243 background: #ef4444; 1244 border: 2px solid var(--surface-1); 1245 box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25); 1246 z-index: 2; 1247} 1248 1249.pd-video-row { 1250 width: 100%; 1251 display: flex; 1252 align-items: center; 1253 gap: 12px; 1254 padding: 10px 12px; 1255 border-radius: 10px; 1256 background: var(--surface-1); 1257 border: 1px solid var(--hairline-1); 1258 color: inherit; 1259 font: inherit; 1260 text-align: left; 1261 cursor: pointer; 1262 transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms), transform var(--dur-fast, 120ms); 1263} 1264.pd-video-row:hover { 1265 border-color: rgba(244,109,17,0.35); 1266 background: rgba(244,109,17,0.05); 1267} 1268.pd-video-row:hover .pd-video-rank { 1269 color: var(--brand-400, #FF8A3D); 1270 opacity: 1; 1271} 1272.pd-video-row:hover .pd-video-title { 1273 color: var(--text, #F5F4F2); 1274} 1275.pd-video-row:focus-visible { 1276 outline: 2px solid rgba(244,109,17,0.55); 1277 outline-offset: 2px; 1278} 1279.pd-video-row:disabled { 1280 cursor: default; 1281 opacity: 0.5; 1282} 1283.pd-video-row:disabled:hover { 1284 border-color: var(--hairline-1); 1285 background: var(--surface-1); 1286} 1287 1288.pd-video-rank { 1289 width: 32px; 1290 text-align: center; 1291 font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); 1292 font-size: 13px; 1293 color: var(--text-dim, #6E6A60); 1294 flex-shrink: 0; 1295 transition: color var(--dur-fast, 120ms); 1296} 1297.pd-video-thumb { 1298 width: 48px; 1299 height: 80px; 1300 flex-shrink: 0; 1301 border-radius: 8px; 1302 overflow: hidden; 1303 background: var(--bg-inset); 1304 position: relative; 1305} 1306.pd-video-thumb-empty { 1307 background: var(--surface-2); 1308} 1309.pd-video-title { 1310 font-weight: 600; 1311 overflow: hidden; 1312 text-overflow: ellipsis; 1313 display: -webkit-box; 1314 -webkit-line-clamp: 2; 1315 -webkit-box-orient: vertical; 1316 color: var(--text-muted, #A8A49A); 1317 transition: color var(--dur-fast, 120ms); 1318} 1319`;function Rr({product:i}){const{t:l}=K(),p=ta(),{data:a=[]}=la(i,6);return a.length===0?e.jsx("p",{style:{opacity:.5,padding:"8px 0"},children:l("app.explorar.detalhe.produto.similarEmpty",{defaultValue:"Sem produtos parecidos no perÃodo."})}):e.jsxs("div",{style:{display:"grid",gap:10},children:[e.jsx("h4",{style:{margin:0,fontSize:13,opacity:.7,textTransform:"uppercase",letterSpacing:"0.08em"},children:l("app.explorar.detalhe.produto.similarTitle")}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(160px, 1fr))",gap:12},children:a.map(n=>{const h=B(n.image_url)??de(n.source_id);return e.jsxs("button",{type:"button",onClick:()=>p(`/explorar/produtos/${encodeURIComponent(n.source_id)}`),style:{display:"grid",gap:6,padding:8,borderRadius:10,border:"1px solid var(--hairline-1)",background:"var(--surface-1)",cursor:"pointer",textAlign:"left",color:"var(--text)"},children:[h?e.jsx("img",{src:h,alt:"",referrerPolicy:"no-referrer",style:{width:"100%",aspectRatio:"1/1",borderRadius:6,objectFit:"cover",background:"var(--surface-2)"}}):e.jsx("div",{style:{width:"100%",aspectRatio:"1/1",borderRadius:6,background:"var(--surface-2)"}}),e.jsx("div",{style:{fontSize:11,lineHeight:1.3,overflow:"hidden",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical"},children:n.product_title}),e.jsx("div",{style:{fontSize:12,fontWeight:700,color:"var(--success)"},children:n.revenue??"â"}),e.jsx("div",{style:{fontSize:10,color:"var(--text-dim)"},children:n.unit_price??""})]},n.source_id)})})]})}export{gt as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.