/* Kit de recursos das páginas de exemplo da Kbh Sites.
   Cada página define as cores com --k-acc, --k-acc-ink, --k-ink, --k-soft, --k-bg, --k-line e a fonte com --k-font. */
.k-faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;padding:.55rem 1rem;background:#0E1430;color:#F3EEE3;font:500 .9rem/1.3 system-ui,sans-serif;text-align:center}
.k-faixa a{color:#5FF0DC;font-weight:700;text-underline-offset:3px}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.2rem;border:0;border-radius:var(--k-radius,12px);background:var(--k-acc);color:var(--k-acc-ink);font:700 1rem/1.2 var(--k-font,system-ui);cursor:pointer;text-decoration:none;transition:transform 140ms cubic-bezier(.23,1,.32,1),filter 140ms ease}
.k-btn:active{transform:scale(.97)}
.k-btn.k-cl{background:transparent;color:var(--k-ink);box-shadow:inset 0 0 0 1.5px var(--k-line)}
.k-btn svg{width:20px;height:20px;flex:none}
@media (hover:hover) and (pointer:fine){.k-btn:hover{filter:brightness(1.06)}}
.k-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.k-chip{min-height:42px;padding:.5rem .9rem;border-radius:99px;border:0;background:var(--k-chip,rgba(0,0,0,.06));color:var(--k-ink);font:600 .95rem/1 var(--k-font,system-ui);cursor:pointer;transition:background-color 140ms ease,color 140ms ease,transform 120ms ease}
.k-chip:active{transform:scale(.96)}
.k-chip[aria-pressed="true"]{background:var(--k-acc);color:var(--k-acc-ink)}
.k-chip[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* sacola fixa */
.k-sacola{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;justify-content:center;pointer-events:none;transform:translateY(140%);transition:transform 220ms cubic-bezier(.23,1,.32,1)}
.k-sacola.on{transform:none}
.k-sacola button{pointer-events:auto;width:min(560px,100%);display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:58px;padding:.6rem .7rem .6rem 1.1rem;border:0;border-radius:16px;background:var(--k-acc);color:var(--k-acc-ink);font:700 1rem var(--k-font,system-ui);cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.k-sacola b{background:rgba(255,255,255,.2);border-radius:10px;padding:.5rem .8rem}
.k-pulo{animation:k-pulo 360ms cubic-bezier(.34,1.56,.64,1)}
@keyframes k-pulo{40%{transform:scale(1.04)}}

/* folha (modal de baixo) */
.k-veu{position:fixed;inset:0;z-index:60;background:rgba(10,12,20,.5);opacity:0;transition:opacity 200ms ease;display:flex;align-items:flex-end;justify-content:center}
.k-veu.on{opacity:1}
.k-folha{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--k-bg,#fff);color:var(--k-ink,#1a1a1a);border-radius:22px 22px 0 0;padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));font-family:var(--k-font,system-ui);transform:translateY(30px);transition:transform 240ms cubic-bezier(.23,1,.32,1)}
.k-veu.on .k-folha{transform:none}
@media (min-width:700px){.k-veu{align-items:center}.k-folha{border-radius:22px}}
.k-folha h3{margin:0 0 .25rem;font-size:1.3rem}
.k-folha .k-sub{color:var(--k-soft);margin:0 0 1rem;font-size:.95rem}
.k-x{float:right;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.06);color:var(--k-ink);font-size:20px;cursor:pointer}
.k-sec{margin-top:1rem}
.k-sec>label,.k-sec>p.k-t{display:block;font-weight:700;margin:0 0 .45rem}
.k-op{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .1rem;border-bottom:1px solid var(--k-line)}
.k-op input{width:20px;height:20px;accent-color:var(--k-acc)}
.k-op label{flex:1;display:flex;justify-content:space-between;gap:.5rem;cursor:pointer}
.k-in,.k-folha select,.k-folha textarea{width:100%;min-height:48px;padding:.65rem .85rem;border-radius:12px;border:1.5px solid var(--k-line);background:transparent;color:var(--k-ink);font:400 1rem var(--k-font,system-ui)}
.k-folha textarea{min-height:76px;resize:vertical}
.k-lin{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--k-line)}
.k-lin small{display:block;color:var(--k-soft)}
.k-qt{display:inline-flex;align-items:center;gap:.4rem}
.k-qt button{width:34px;height:34px;border-radius:10px;border:0;background:rgba(0,0,0,.07);color:var(--k-ink);font:700 1.1rem var(--k-font,system-ui);cursor:pointer}
.k-tot{display:flex;justify-content:space-between;font-weight:800;font-size:1.15rem;padding:.8rem 0}
.k-desc{color:#1F7A4D;font-weight:700}
.k-aviso{font-size:.85rem;color:var(--k-soft);margin:.5rem 0 0}
.k-fim{margin-top:1rem;display:grid;gap:.6rem}

/* prévia do WhatsApp */
.k-zap{background:#EFEAE2;border-radius:16px;padding:12px;margin:.5rem 0 .25rem}
.k-bal{background:#D9FDD3;color:#111B21;border-radius:12px 12px 3px 12px;padding:9px 11px 6px;margin-left:auto;max-width:92%;white-space:pre-line;font:400 .95rem/1.4 system-ui,sans-serif;box-shadow:0 1px .5px rgba(0,0,0,.12)}
.k-bal time{display:block;text-align:right;font-size:.72rem;color:#667781;margin-top:2px}
.k-pix{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center;margin-top:1rem;padding:1rem;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--k-line)}
.k-pix svg{width:120px;height:120px;background:#fff;border-radius:10px;padding:6px}
.k-pix b{font-size:1.4rem;display:block}
.k-pix small{color:var(--k-soft)}

/* aberto agora */
.k-st{display:inline-flex;align-items:center;gap:.45rem;font:700 .85rem/1 var(--k-font,system-ui);padding:.45rem .8rem;border-radius:99px}
.k-st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.k-st.ab{background:#D7F5E3;color:#0B6B3A}
.k-st.fe{background:#F6E1E1;color:#A32D2D}

/* antes e depois */
.k-ad{--x:50%;position:relative;overflow:hidden;border-radius:var(--k-card,var(--k-radius,14px));aspect-ratio:4/3;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.k-ad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.k-ad .k-depois{clip-path:inset(0 0 0 var(--x))}
.k-ad .k-antes{filter:var(--k-antes,grayscale(.85) brightness(.75) contrast(.9) sepia(.25))}
.k-ad .k-linha{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.k-ad .k-linha::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.k-ad input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.k-ad .k-r{position:absolute;top:10px;padding:.3rem .65rem;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font:700 .8rem system-ui,sans-serif;pointer-events:none}
.k-ad .k-r.a{left:10px}.k-ad .k-r.d{right:10px}

/* cartão fidelidade */
.k-fid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.k-fid button{aspect-ratio:1;border-radius:50%;border:2px dashed var(--k-line);background:transparent;color:var(--k-acc-ink);font:800 1rem var(--k-font,system-ui);cursor:pointer;display:grid;place-items:center;transition:background-color 160ms ease,transform 160ms ease}
.k-fid button.on{background:var(--k-acc);border-style:solid;border-color:var(--k-acc)}
.k-fid button.pr{border-style:solid;border-color:var(--k-acc);color:var(--k-acc)}
.k-fid button:active{transform:scale(.92)}

/* avaliações */
.k-avs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:.75rem}
.k-av{border-radius:var(--k-card,var(--k-radius,14px));padding:1rem;box-shadow:inset 0 0 0 1.5px var(--k-line)}
.k-av .k-es{color:#F4B400;letter-spacing:.1em}
.k-av p{margin:.45rem 0;line-height:1.45}
.k-av small{color:var(--k-soft)}

/* foto pro orçamento */
.k-foto{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:12px;border:1.5px dashed var(--k-line);cursor:pointer}
.k-foto img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.k-foto{position:relative}
.k-foto input[type=file]{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;overflow:hidden}

/* estoque */
.k-restam{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.85rem;color:#B4231F}
.k-restam::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5483F;animation:k-pisca 1.4s ease infinite}
@keyframes k-pisca{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.k-restam::before{animation:none}.k-sacola,.k-veu,.k-folha{transition:none}}
@media (max-width:480px){.k-st{font-size:.74rem;padding:.4rem .65rem;line-height:1.25}}
@media (max-width:480px){header .logo{font-size:var(--k-logo-m,1.25rem);white-space:nowrap}header .logo i,header .logo svg{flex:none}}