/* barra-fixa.css — cabeçalho enxuto + barra fixa modular (inicio / catalogo / produto) + popup do produto.
   Usa as variáveis do tema (/api/tema.css): --primary-color, --secondary-color, --text-color, --surface-color, --border-color. */

/* ================= CABEÇALHO: logo centralizada + ícone da conta à direita ================= */
.header .container { position: relative; justify-content: center; }
.header .carrinho-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; }
.header .logo-index { margin: 10px auto; }
.header .logo-container { justify-content: center; }
@media (max-width: 560px) { .header .container { padding: 0 14px; } .header .carrinho-icon { right: 14px; } }

/* ================= BARRA FIXA ================= */
:root {
    --bf-h: 64px;
    --bf-ease: cubic-bezier(.2, .8, .2, 1);
    --bf-vidro: color-mix(in srgb, var(--surface-color, #fff) 88%, transparent);
    --bf-linha: color-mix(in srgb, var(--text-color, #333) 11%, transparent);
    --bf-suave: color-mix(in srgb, var(--text-color, #333) 6%, transparent);
    --bf-hover: color-mix(in srgb, var(--text-color, #333) 9%, transparent);
    --bf-contorno: color-mix(in srgb, var(--text-color, #333) 24%, transparent);
    --bf-realce: color-mix(in srgb, var(--primary-color, #2d9fa3) 13%, transparent);
}

/* A barra e seus menus usam um vidro escuro (independente do tema claro da loja) */
.bf-wrap, .pop-info, .pop-legenda {
    --text-color: #eef1f3; --surface-color: #1b1d20;
    --bf-vidro: color-mix(in srgb, #15171a 82%, transparent);
    --bf-linha: rgba(255, 255, 255, .13); --bf-suave: rgba(255, 255, 255, .08); --bf-hover: rgba(255, 255, 255, .12); --bf-contorno: rgba(255, 255, 255, .26);
    --bf-realce: color-mix(in srgb, var(--primary-color, #2d9fa3) 26%, transparent);
    --bf-claro: color-mix(in srgb, var(--primary-color, #2d9fa3) 62%, #fff);
    /* mesmo vidro da barra fixa (cor + transparência + blur), usado também na folha ⓘ e na legenda de preço */
    --bf-vidro-cor: color-mix(in srgb, #15171a 82%, transparent);
    --bf-vidro-blur: saturate(1.6) blur(18px);
}

body.bf-ativa { padding-bottom: calc(var(--bf-h) + 40px + var(--k-safe-b, env(safe-area-inset-bottom, 0px))); }

.bf-wrap {
    position: fixed; left: 0; right: 0; z-index: 1200;
    bottom: calc(14px + var(--k-safe-b, env(safe-area-inset-bottom, 0px)) + var(--kb, 0px) + var(--cookie-h, 0px));
    display: flex; justify-content: center; padding: 0 10px;
    pointer-events: none;
    transition: bottom .25s var(--bf-ease);
}

.bf {
    --bf-w: 176px;
    position: relative; pointer-events: auto;
    height: var(--bf-h); width: var(--bf-w); max-width: 100%;
    border-radius: 999px;
    transition: width .42s var(--bf-ease);
    -webkit-user-select: none; user-select: none;
}
.bf[data-modo="catalogo"] { --bf-w: min(620px, 100vw - 20px); }
.bf[data-modo="produto"]  { --bf-w: min(500px, 100vw - 20px); }
.bf[data-modo="inicio"]   { --bf-w: var(--bf-h); }   /* página inicial: barra redonda só com o botão do carrinho */

/* superfície de vidro (no pseudo-elemento, para os menus não herdarem o blur) */
.bf::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--bf-vidro);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    border: 1px solid var(--bf-linha);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* painéis empilhados: um sai (rápido), o outro entra (um instante depois) */
.bf-painel {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px) scale(.985);
    transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}
.bf-painel.ativo {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .28s ease .12s, transform .36s var(--bf-ease) .1s, visibility 0s;
}
.bf-painel[data-painel="inicio"] { justify-content: center; }

/* ---- botões ---- */
.bf-btn {
    position: relative; flex: none; height: 44px; width: 44px; min-width: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-color, #333);
    font-weight: 600; font-size: .9rem; line-height: 1; font-family: inherit; text-decoration: none; cursor: pointer;
    transition: background-color .18s ease, transform .15s ease, color .18s ease;
}
.bf-btn:active { transform: scale(.95); }
.bf-btn[aria-expanded="true"] { background: var(--bf-realce); color: var(--bf-claro); }
@media (hover: hover) { .bf-btn:hover { background: var(--bf-hover); } .bf-btn[aria-expanded="true"]:hover { background: var(--bf-realce); } }
.bf-btn:focus-visible, .bf-item:focus-visible, .bf-cor:focus-visible, .bf-limpar:focus-visible, .bf-qb:focus-visible {
    outline: 2px solid var(--primary-color, #2d9fa3); outline-offset: 2px;
}
.bf-ic { position: relative; display: inline-flex; font-size: 1.12rem; }
.bf-seta { font-size: .62rem; opacity: .55; transition: transform .25s var(--bf-ease); }
.bf-btn[aria-expanded="true"] .bf-seta { transform: rotate(180deg); }
.bf-rot { display: none; }

.bf-badge {
    position: absolute; top: -9px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--primary-color, #2d9fa3); color: #fff;
    font-weight: 700; font-size: .66rem; line-height: 1; font-family: inherit; box-shadow: 0 0 0 2px var(--surface-color, #fff);
    transition: transform .25s var(--bf-ease), opacity .2s ease;
}
.bf-badge[data-zero] { opacity: 0; transform: scale(.4); pointer-events: none; }
.bf-badge.bf-pulso { animation: bf-pulso .5s var(--bf-ease); }
@keyframes bf-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }


/* ---- busca ---- */
.bf-busca { position: relative; flex: 1; min-width: 0; display: block; }
.bf-busca > i.fa-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: .95rem; color: color-mix(in srgb, var(--text-color, #333) 45%, transparent); pointer-events: none; transition: color .2s ease; }
.bf-busca input {
    width: 100%; height: 44px; padding: 0 42px 0 42px; border-radius: 999px;
    border: 1px solid transparent; background: var(--bf-suave); color: var(--text-color, #333);
    font-weight: 500; font-size: 1rem; line-height: 1; font-family: inherit; outline: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bf-busca input::placeholder { color: color-mix(in srgb, var(--text-color, #333) 48%, transparent); }
.bf-busca input:focus { background: rgba(255, 255, 255, .1); border-color: color-mix(in srgb, var(--primary-color, #2d9fa3) 60%, transparent); box-shadow: 0 0 0 4px var(--bf-realce); }
.bf-busca:focus-within > i.fa-search { color: var(--bf-claro); }
.bf-limpar {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(.8); width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: transparent; color: color-mix(in srgb, var(--text-color, #333) 55%, transparent); font-size: .8rem; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.bf-limpar.visivel { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
@media (hover: hover) { .bf-limpar:hover { background: var(--bf-hover); } }

/* ---- produto: tamanho, cor, quantidade, adicionar ---- */
.bf-grupo { display: flex; align-items: center; gap: 6px; flex: none; }
.bf-tipo, .bf-carrinho { background: var(--bf-suave); border: 1px solid var(--bf-linha); }
/* cor: mesmo círculo (44px) do botão de adicionar, no canto esquerdo da barra */
.bf-cor-btn {
    flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
    background-color: #ccc; background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px var(--bf-contorno), 0 3px 8px rgba(0, 0, 0, .18);
    transition: transform .2s var(--bf-ease), box-shadow .2s ease;
}
.bf-cor-btn:active { transform: scale(.92); }
.bf-cor-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--primary-color, #2d9fa3), 0 3px 8px rgba(0, 0, 0, .18); }
.bf-cor-btn:focus-visible { outline: 2px solid var(--primary-color, #2d9fa3); outline-offset: 4px; }

.bf-centro { flex: 1; min-width: 0; display: flex; justify-content: center; }
/* painel do produto em 3 colunas (1fr · auto · 1fr): a quantidade fica no centro exato da barra, não importa a largura do botão Adicionar */
.bf-painel[data-painel="produto"] { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; }
.bf-painel[data-painel="produto"] > .bf-grupo { justify-self: start; }
.bf-painel[data-painel="produto"] > .bf-centro { flex: none; justify-self: center; }
.bf-painel[data-painel="produto"] > .bf-add { justify-self: end; }
.bf-qtd { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: transparent; border: 1px solid var(--bf-contorno); }   /* contorno envolve o número e os dois botões */
.bf-qb {
    width: 36px; height: 36px; border: 1px solid var(--bf-contorno); border-radius: 50%; background: var(--bf-suave); color: var(--text-color, #333);
    display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.bf-qb:active { transform: scale(.88); }
@media (hover: hover) { .bf-qb:hover { background: var(--bf-hover); } }
.bf-qtd input {
    width: 38px; height: 36px; border: 0; background: transparent; text-align: center; color: var(--text-color, #333);
    font-weight: 700; font-size: 1rem; line-height: 1; font-family: inherit; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield;
}
.bf-qtd input::-webkit-inner-spin-button, .bf-qtd input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bf-add {
    flex: none; height: 44px; width: auto; min-width: 44px; padding: 0 16px; gap: 8px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: linear-gradient(135deg, var(--primary-color, #2d9fa3), var(--secondary-color, #088a6e)); color: #fff;
    font-weight: 700; font-size: .92rem; line-height: 1; font-family: inherit;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary-color, #2d9fa3) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.bf-add i { font-size: 1.05rem; }
@media (hover: hover) {
    .bf-btn.bf-add:hover { background: linear-gradient(315deg, var(--primary-color, #2d9fa3), var(--secondary-color, #088a6e)); filter: brightness(1.12) saturate(1.1); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--secondary-color, #088a6e) 85%, #000), inset 0 1px 0 rgba(255, 255, 255, .3); }
}
.bf-add:active { transform: scale(.95); }
.bf-add:disabled { filter: grayscale(.8); opacity: .55; cursor: not-allowed; }

/* telas estreitas: botões menores para a quantidade continuar no centro da barra (precisa vir depois das regras-base acima) */
@media (max-width: 440px) {
    .bf-painel[data-painel="produto"] { gap: 4px; padding: 0 8px; }
    .bf-add { padding: 0 12px; gap: 6px; font-size: .82rem; } .bf-add i { font-size: .95rem; }
    .bf-qtd { gap: 0; } .bf-qb { width: 36px; height: 36px; } .bf-qtd input { width: 30px; height: 36px; font-size: .95rem; }
    .bf-grupo { gap: 4px; }
}

/* ---- menus flutuantes (abrem para cima) ---- */
.bf-menu {
    position: absolute; left: 0; bottom: calc(100% + 10px); width: min(100%, 340px); max-height: min(60dvh, 420px); overflow: auto;
    padding: 8px; border-radius: 22px; transform-origin: 24px 100%;
    background: color-mix(in srgb, #17191c 94%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
    border: 1px solid var(--bf-linha); box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.96);
    transition: opacity .16s ease, transform .2s var(--bf-ease), visibility 0s .2s;
    scrollbar-width: thin; overscroll-behavior: contain;
}
.bf-menu.aberto { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .2s ease, transform .3s var(--bf-ease), visibility 0s; }
.bf-menu-largo { width: min(100%, 380px); }
.bf-menu-titulo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--text-color, #333) 55%, transparent);
}
.bf-menu-titulo b { font-weight: 700; color: var(--text-color, #333); text-transform: none; letter-spacing: 0; font-size: .82rem; }
.bf-item {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 15px; background: transparent;
    color: var(--text-color, #333); font-family: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease;
}
@media (hover: hover) { .bf-item:hover:not(:disabled) { background: var(--bf-hover); } }
.bf-item:disabled { opacity: .4; cursor: not-allowed; }
.bf-item-ic {
    flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
    background: var(--bf-realce); color: var(--bf-claro); font-size: .95rem; font-weight: 800;
}
.bf-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bf-item-txt strong { font-size: .92rem; font-weight: 600; }
.bf-item-txt small { font-size: .76rem; color: color-mix(in srgb, var(--text-color, #333) 55%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-item-preco { flex: none; font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; }
.bf-check {
    flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--text-color, #333) 28%, transparent); color: transparent; font-size: .62rem;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .25s var(--bf-ease);
}
.bf-item[aria-checked="true"] .bf-check, .bf-item[aria-current="true"] .bf-check { color: #fff; transform: scale(1.06); }
.bf-item[aria-checked="true"], .bf-item[aria-current="true"] {
    background: linear-gradient(135deg, var(--primary-color, #2d9fa3), var(--secondary-color, #088a6e)); color: #fff;
}
.bf-item[aria-checked="true"] .bf-item-ic, .bf-item[aria-current="true"] .bf-item-ic { background: rgba(255, 255, 255, .22); color: #fff; }
.bf-item[aria-checked="true"] .bf-item-txt small, .bf-item[aria-current="true"] .bf-item-txt small { color: rgba(255, 255, 255, .8); }
.bf-item[aria-checked="true"] .bf-check, .bf-item[aria-current="true"] .bf-check { background: rgba(255, 255, 255, .25); border-color: transparent; }
.bf-menu-tipos .bf-item { border: 1px solid var(--bf-linha); margin-bottom: 6px; }
.bf-menu-tipos .bf-item[aria-checked="true"] { border-color: transparent; }
.bf-menu-tipos .bf-item:last-child { margin-bottom: 0; }
.bf-divisor { height: 1px; margin: 6px 8px; background: var(--bf-linha); }

.bf-paleta { padding: 2px 8px 8px; }
.bf-paleta-grupo { margin-bottom: 8px; }
.bf-paleta-nome { margin: 4px 2px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--text-color, #333) 55%, transparent); }
.bf-paleta-grade { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-cor {
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background-color: #ccc; background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px var(--bf-linha), 0 2px 5px rgba(0, 0, 0, .14);
    transition: transform .18s var(--bf-ease), box-shadow .18s ease;
}
@media (hover: hover) { .bf-cor:hover { transform: scale(1.12); } }
.bf-cor[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface-color, #fff), 0 0 0 4px var(--primary-color, #2d9fa3); transform: scale(1.04); }

/* notificações sobem para não ficar atrás da barra */
:root { --k-toast-base: calc(var(--bf-h) + 34px); }    /* o aviso (k-toast.css) fica logo acima da barra */

/* ================= POPUP DO PRODUTO (só a imagem) ================= */
.modal { padding-bottom: calc(var(--bf-h) + 30px); box-sizing: border-box; }
.modal.ativo { background-color: transparent; -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }

.pop {
    --pop-w: min(92vw, 560px, calc(100dvh - 230px));
    position: relative; width: max(var(--pop-w), 240px); display: flex; flex-direction: column;
    opacity: 0; transform: translateY(14px) scale(.965);
    transition: opacity .25s ease, transform .4s var(--bf-ease);
}
.modal.ativo .pop { opacity: 1; transform: none; }

.pop-palco {
    position: relative; z-index: 2; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 26px;
    background: var(--surface-color, #fff); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
    touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.pop-palco.so-uma { cursor: default; }
@media (hover: hover) and (pointer: fine) { .pop-palco { cursor: zoom-in; } .pop-palco.com-zoom { cursor: zoom-out; } }

.pop-faixa {
    display: flex; width: 100%; height: 100%;
    transform: translate3d(calc(var(--i, 0) * -100% + var(--dx, 0px)), 0, 0);
    transition: transform .42s var(--bf-ease); will-change: transform;
}
.pop-palco.arrastando .pop-faixa { transition: none; }
.pop-slide { flex: 0 0 100%; height: 100%; overflow: hidden; }
.pop-slide img {
    display: block; width: 100%; height: 100%; padding: 3%; object-fit: contain; pointer-events: none; -webkit-user-drag: none;
    transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .3s var(--bf-ease);
}
.pop-slide.zoom img { transform: scale(var(--z, 2.4)); }

.pop-vidro {
    position: absolute; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; cursor: pointer;
    background: rgba(255, 255, 255, .82); color: #222; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .05);
    transition: transform .2s var(--bf-ease), background-color .2s ease, color .2s ease, opacity .25s ease;
}
.pop-vidro:active { transform: scale(.9); }
@media (hover: hover) { .pop-vidro:hover { background: #fff; } }
.pop-vidro:focus-visible { outline: 2px solid var(--primary-color, #2d9fa3); outline-offset: 2px; }
.pop-info-btn { bottom: 12px; left: 50%; margin-left: -19px; z-index: 4; }          /* mesma aparencia do botao de compartilhar (.pop-vidro); so a posicao e propria */
.pop-info-btn[aria-expanded="true"] { color: var(--primary-color, #2d9fa3); }       /* so a cor do icone avisa que a folha de detalhes esta aberta */
.pop-compartilhar { top: 12px; left: 12px; }          /* espelho do X: o titulo fica centralizado entre os dois */
.pop-fechar { top: 12px; right: 12px; background: var(--danger-color, #dc3545); color: #fff; box-shadow: 0 4px 14px rgba(220, 53, 69, .4); }
@media (hover: hover) { .pop-fechar:hover { background: color-mix(in srgb, var(--danger-color, #dc3545) 86%, #fff); } }
.pop-palco.com-zoom .pop-vidro, .pop-palco.com-zoom .pop-titulo, .pop-palco.com-zoom .pop-pontos, .pop-palco.com-zoom .pop-dica { opacity: 0; pointer-events: none; }

/* título: centralizado na caixa da imagem, na mesma linha do botão de fechar (margens simétricas = sem entortar) */
.pop-titulo {
    position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%);
    height: 38px; max-width: calc(100% - 120px); padding: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-color, #222); text-transform: uppercase; letter-spacing: .06em;
    text-shadow: 0 0 8px var(--surface-color, #fff), 0 0 3px var(--surface-color, #fff);
    font-size: 1rem; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none; transition: opacity .25s ease;
}

/* setas (só mouse) */
.pop-seta { top: 50%; margin-top: -17px; width: 34px; height: 34px; font-size: .8rem; opacity: 0; display: none; }
.pop-seta.ant { left: 10px; } .pop-seta.prox { right: 10px; }
@media (hover: hover) and (pointer: fine) {
    .pop-seta { display: inline-flex; }
    .pop-palco:hover .pop-seta, .pop-palco:focus-within .pop-seta { opacity: .92; }
    .pop-palco:hover .pop-seta:disabled { opacity: .3; cursor: default; }
}
.pop-seta:disabled { pointer-events: none; }

/* pontos */
.pop-pontos {
    position: absolute; z-index: 3; left: 50%; bottom: 58px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 9px; border-radius: 999px;
    background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .25s ease;
}
.pop-ponto { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); cursor: pointer; transition: width .3s var(--bf-ease), background-color .25s ease; }
.pop-ponto[aria-current="true"] { width: 18px; background: #fff; }

/* dica de zoom (celular, aparece uma vez) */
.pop-dica {
    position: absolute; z-index: 3; left: 50%; bottom: 92px; transform: translate(-50%, 6px); padding: 7px 13px; border-radius: 999px; white-space: nowrap;
    background: rgba(0, 0, 0, .62); color: #fff; font-size: .76rem; font-weight: 600; opacity: 0; pointer-events: none;
    transition: opacity .35s ease, transform .35s var(--bf-ease);
}
.pop-dica.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ⓘ: folha com descrição e coleções */
.pop-info {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-height: 72%; overflow: auto; padding: 22px 20px 66px;
    background: var(--bf-vidro-cor); -webkit-backdrop-filter: var(--bf-vidro-blur); backdrop-filter: var(--bf-vidro-blur);
    border: 1px solid var(--bf-linha); border-bottom: 0;
    border-radius: 26px 26px 0 0; box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .09);
    transform: translateY(102%); visibility: hidden; transition: transform .42s var(--bf-ease), visibility 0s .42s;
    -webkit-user-select: text; user-select: text; touch-action: pan-y; cursor: auto;
}
.pop-info.aberto { transform: none; visibility: visible; transition: transform .42s var(--bf-ease), visibility 0s; }
.pop-info h3 { margin: 0 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--text-color, #333) 55%, transparent); }
.pop-info p { margin: 0 0 14px; font-size: .9rem; line-height: 1.55; color: var(--text-color, #333); }
.pop-colecoes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pop-colecoes span { padding: 5px 11px; border-radius: 999px; background: var(--bf-realce); color: var(--bf-claro); font-size: .78rem; font-weight: 600; }
.pop-info .pop-cod { margin: 10px 0 0; font-size: .72rem; color: color-mix(in srgb, var(--text-color, #333) 45%, transparent); }

/* com a folha ⓘ aberta, os pontinhos saem da frente */
.pop-palco:has(.pop-info.aberto) .pop-dica, .pop-palco:has(.pop-info.aberto) .pop-pontos { opacity: 0; pointer-events: none; }

/* campo sob a foto: parece sair de baixo da caixa da imagem (cantos de cima escondidos atrás dela) */
.pop-legenda {
    position: relative; z-index: 1; margin: -28px 18px 0; padding: 40px 18px 15px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff;
    border-radius: 0 0 26px 26px; background: var(--bf-vidro-cor);
    -webkit-backdrop-filter: var(--bf-vidro-blur); backdrop-filter: var(--bf-vidro-blur);
    border: 1px solid var(--bf-linha); border-top: 0;
    box-shadow: 0 22px 36px -16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .09);
    transform: translateY(-14px); opacity: 0; transition: transform .5s var(--bf-ease) .12s, opacity .3s ease .12s;
}
.modal.ativo .pop-legenda { transform: none; opacity: 1; }
.pop-legenda-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pop-sub { font-size: .95rem; font-weight: 650; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tamanho: botão na legenda (mostra o tamanho escolhido, ex.: "P (10 cm)"); ao tocar abre a lista de tamanhos */
.pop-tam-btn {
    align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--bf-contorno); background: var(--bf-suave); color: #fff; font: inherit; font-size: .95rem; font-weight: 650; line-height: 1; cursor: pointer;
    transition: background-color .18s ease, transform .15s ease, border-color .18s ease;
}
.pop-tam-btn .pop-tam-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-tam-btn i { flex: none; font-size: .68rem; opacity: .7; transition: transform .25s var(--bf-ease); }
.pop-tam-btn[aria-expanded="true"] { background: var(--bf-realce); border-color: var(--primary-color, #2d9fa3); color: var(--bf-claro); }
.pop-tam-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.pop-tam-btn:active { transform: scale(.97); }
.pop-tam-btn:disabled { opacity: .6; cursor: default; }
.pop-tam-btn:focus-visible { outline: 2px solid var(--primary-color, #2d9fa3); outline-offset: 2px; }
@media (hover: hover) { .pop-tam-btn:hover:not(:disabled) { background: var(--bf-hover); } }
.pop-total { flex: none; display: inline-flex; align-items: baseline; gap: 4px; font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    /* mesmo degradê do botão do carrinho, realçado para ter destaque sobre o vidro escuro */
    color: var(--secondary-color, #088a6e);
    background: linear-gradient(135deg, var(--primary-color, #2d9fa3), var(--secondary-color, #088a6e));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: brightness(1.5) saturate(1.25) drop-shadow(0 0 10px color-mix(in srgb, var(--primary-color, #2d9fa3) 55%, transparent)); }
.pop-total small { font-size: .8rem; font-weight: 800; letter-spacing: 0; -webkit-text-fill-color: transparent; }

/* celular: o botão de tamanho ganha espaço (fonte menor, menos recheio, legenda mais enxuta) e o preço antigo fica EM CIMA do atual, não ao lado */
@media (max-width: 560px) {
    .pop-legenda { padding: 40px 12px 14px; gap: 8px; }
    .pop-legenda-txt { flex: 1 1 auto; min-width: 0; }
    .pop-tam-btn { font-size: .8rem; gap: 6px; min-height: 34px; padding: 0 10px; }
    .pop-tam-btn i { font-size: .6rem; }
    .pop-total { font-size: 1.9rem; }
    .pop-total small { font-size: .85rem; }
    .pop-legenda .pop-total:has(.pop-preco-antigo) { flex-direction: column; align-items: flex-end; gap: 2px; }
    .pop-legenda .pop-total .pop-preco-antigo { align-self: flex-end; margin: 0; font-size: .88rem; line-height: 1.1; }
}
@media (max-width: 360px) {
    .pop-tam-btn { font-size: .74rem; padding: 0 8px; }
    .pop-total { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bf, .bf-painel, .bf-menu, .pop, .pop-legenda, .pop-faixa, .pop-slide img, .pop-info { transition-duration: .01ms !important; transition-delay: 0s !important; }
}