/* ═══ 5.1 · b · ícones a traço (sem amarelo por dentro), biblioteca com duas linhas por grupo, ficha do produto em coluna com hierarquia ═══ */
/* 1 · ícones dos produtos: só o traço verde-escuro; o interior fica branco (o vidro com um tom muito claro) */
.pi50f .a,.pi50f .w,.pi50f .y,.pi50f .m{fill:#fff}
.pi50f .g{fill:#eef5f8}
.pi50f text{font-family:Arial,Helvetica,sans-serif}

@media (min-width:701px){
/* 2 · biblioteca de ícones: 8 por linha, duas linhas cheias por grupo */
.ip50f{max-height:62vh}
.ipg50f>div{grid-template-columns:repeat(8,minmax(0,1fr))}
.ipg50f button{min-height:74px;justify-content:flex-start}
.ipg50f button span{display:block;min-height:2.4em}

/* 3 · ficha do produto: tudo numa coluna; o produto principal em cima e os subprodutos pendurados por baixo, como uma árvore */
.xp.pe50f{padding:10px 14px 14px}
.pe51b{display:flex;flex-direction:column;gap:0;min-width:0}
.pp51b{background:#fff;border:1px solid var(--bd);border-left:3px solid var(--ac);border-radius:12px;padding:10px 14px 6px;box-shadow:0 1px 2px rgba(28,42,45,.04);min-width:0}
.pk51b{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0}
.tg51b{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--ac);border-radius:999px;padding:2px 10px;white-space:nowrap;flex:none}
.tg51b.s{background:#fff;color:var(--ac);border:1.5px solid var(--ac)}
.pk51b .mu{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ps51b{padding:9px 0;border-top:1px dashed var(--bd);min-width:0}
.pk51b+.ps51b{border-top:0}
.ps51b.pe50h{display:flex;gap:14px;align-items:flex-start;padding-top:2px}
.ps51b .pe50t{margin-bottom:4px}
.ps51b .or50f{max-width:760px}
.ps51b.sw50f .sw50g{max-width:760px}
.ps51b .lm50f{padding-top:0}
.pn51b{font-size:14px;color:var(--ink)}
.ov51b .sh{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tit,#1d4c4f)}

/* subprodutos: ligados ao produto principal por um fio à esquerda */
.sb51b{margin:0 0 0 44px;min-width:0}
.li51b{position:relative;padding:4px 0 4px 26px;min-width:0}
.li51b::before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:2px solid #b8d0d0}
.li51b:last-child::before{bottom:calc(50% - 1px)}
.li51b::after{content:'';position:absolute;left:0;top:50%;width:22px;border-top:2px solid #b8d0d0}
.li51b.h51b{padding-top:10px}
.li51b.h51b::after{top:calc(50% + 3px)}
.sh51b{display:flex;align-items:center;gap:8px;min-width:0}
.sh51b b{font-size:13px;color:var(--ink);white-space:nowrap}
.sh51b .mu{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sh51b .btn{margin-left:auto;flex:none}
.sn51b{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,auto) 58px 30px 30px;gap:10px;align-items:center;background:#fff;border:1px solid var(--bd);border-radius:10px;padding:6px 10px;cursor:pointer;min-width:0;box-shadow:0 1px 2px rgba(28,42,45,.03)}
.sn51b:hover{border-color:var(--acb,#9ac4c5);background:#fbfdfb}
.sn51b.ro{grid-template-columns:40px minmax(0,1fr) minmax(0,auto);cursor:default}
.sn51b .d{display:flex;flex-direction:column;min-width:0}
.sn51b .d b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn51b .d span{font-size:11.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.df51b{font-size:11.5px;color:var(--mu);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px}
.df51b.x{color:#8a5a1c}
.sv51b{font-size:12px;color:var(--mu);border:1px dashed var(--bd);border-radius:10px;padding:8px 12px;background:#fbfbf9;display:flex;align-items:center;gap:10px}
.sv51b .btn{margin-left:auto}
.dl51b{margin-top:10px}

/* janela do subproduto: a ligação ao produto principal em cima e as caixas umas por baixo das outras */
.sp51b{display:flex;align-items:center;gap:8px;width:820px;max-width:100%;margin:-2px 0 12px;padding:7px 10px;border-radius:10px;background:#f2f7f7;border:1px solid #dae9e8;font-size:12.5px;color:var(--ink)}
.sp51b .tg51b{font-size:10px}
.sp51b .mu{font-size:11.5px}
.sx50o{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px}
.sx50c{max-height:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:8px 10px}
.sx50c>.pe50t{flex-basis:100%;margin-bottom:0}
.sx50c .ck50f{flex:none;border:1px solid var(--bd);background:#fff;padding:4px 9px}
.sx50c .ck50f.on{border-color:#bbd7d7;background:#f4f9f9}
.sx50c .ck50f.own{flex:1 1 100%}
.sx50c>.btn{margin:0 0 0 auto;align-self:center}
.sx50c>.mu{flex:1}
}
@media (min-width:701px){
.sp51b b{white-space:nowrap}
.jm51b{margin-left:auto;flex:none;font-size:12px;font-weight:600;white-space:nowrap}
}

