/* =====================================================================
   Página 0km – layout DESKTOP (requer css/zerokm-base.1.0.0.css)
   ===================================================================== */
.zk{padding:16px 32px 48px;font-family:Arial,'Helvetica Neue',sans-serif}

/* Breadcrumb */
.zk-breadcrumb{display:flex;gap:6px;font-size:12px;color:#767676;margin-bottom:16px}
.zk-breadcrumb a{color:#003399;text-decoration:none}
.zk-breadcrumb a:hover{color:#B01717}
.zk-breadcrumb strong{color:#333;font-weight:normal}

/* Foto + card de informações */
.zk-hero{position:relative;height:620px;border-radius:8px;overflow:hidden;background:#F2F2F2}
.zk-hero-foto{position:absolute;top:0;height:100%;object-fit:cover;object-position:center 55%;z-index:1}
/* Emenda em 404px = borda direita do card (24 + 380).
   Foto e reflexo ocupam exatamente a mesma caixa (left 404px até a borda direita) com o mesmo enquadramento
   (object-fit + object-position). O reflexo é espelhado pela borda esquerda (a emenda): a coluna de pixels da
   borda da foto encontra a mesma coluna espelhada, sem degrau, sem esticar e sem mudar de tamanho. */
.zk-hero-foto{display:block;left:404px;width:calc(100% - 404px)}   /* img: largura explícita (left/right não esticam imagem) */
.zk-hero-reflexo{position:absolute;top:0;bottom:0;left:404px;width:calc(100% - 404px);transform:scaleX(-1);transform-origin:left center}
.zk-hero-reflexo img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
/* Desfoque progressivo só do lado do reflexo (0 a 404px): 3 camadas com blur decrescente (10px, 5px, 2px), cada uma
   com máscara que termina mais perto da emenda. Na emenda o blur é zero: a foto e a borda do reflexo ficam intactas. */
.zk-hero-desfoque{position:absolute;top:0;bottom:0;left:0;width:404px;z-index:1;pointer-events:none}
.zk-hero-desfoque span{position:absolute;inset:0}
.zk-hero-desfoque span:nth-child(1){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to right,#000 0,#000 35%,transparent 60%);mask-image:linear-gradient(to right,#000 0,#000 35%,transparent 60%)}
.zk-hero-desfoque span:nth-child(2){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask-image:linear-gradient(to right,#000 0,#000 55%,transparent 80%);mask-image:linear-gradient(to right,#000 0,#000 55%,transparent 80%)}
.zk-hero-desfoque span:nth-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(to right,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 70%,transparent 100%)}
/* Degradê do escuro (sob o card) para transparente, passando 40px da borda do card para dentro da foto
   (efeito de "padding"). Fica acima da foto e do reflexo e abaixo do card (z-index 2). */
.zk-hero:after{content:"";position:absolute;top:0;bottom:0;left:0;width:444px;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.35) 0,rgba(0,0,0,.22) 244px,rgba(0,0,0,.08) 384px,rgba(0,0,0,0) 444px)}
.zk-hero-semfoto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#767676}
.zk-card{position:absolute;top:24px;left:24px;bottom:24px;width:380px;background:rgba(255,255,255,.97);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.12);padding:28px;display:flex;flex-direction:column;gap:22px;z-index:2}
.zk-contador{position:absolute;top:24px;right:24px;background:rgba(0,0,0,.6);color:#FFF;font-size:12px;padding:5px 10px;border-radius:12px;z-index:2}
.zk-seta{position:absolute;top:286px;width:48px;height:48px;border-radius:50%;border:0;background:#FFF;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;z-index:2}
.zk-seta svg{width:20px;height:20px}
.zk-seta-anterior{left:452px}
.zk-seta-proxima{right:24px}
.zk-miniaturas{position:absolute;right:24px;bottom:24px;display:flex;gap:8px;padding:8px;background:rgba(255,255,255,.9);border-radius:8px;z-index:2}
.zk-miniaturas button{width:72px;height:50px;padding:0;border:1px solid #D0D0D0;border-radius:5px;background:#E4E4E4;cursor:pointer;overflow:hidden;opacity:.8}
.zk-miniaturas button.ativo{border:2px solid #B01717;opacity:1}
.zk-miniaturas img{width:100%;height:100%;object-fit:cover;display:block}

/* Corpo: abas + onde comprar */
.zk-corpo{display:flex;gap:32px;align-items:flex-start;margin-top:32px}
.zk-principal{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px}
.zk-chamada{max-width:620px;display:flex;flex-direction:column;gap:8px;padding:4px 0 10px}
.zk-chamada h2{font-size:24px;line-height:1.25;color:#1d2327}
.zk-chamada p{font-size:15px;line-height:1.6;color:#555}

/* Onde comprar (painel lateral fixo) */
.zk-lojas{width:400px;flex-shrink:0;background:#F6F6F7;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:16px;position:sticky;top:12px}

/* Outros 0km (carrossel com setas) */
.zk-outros{margin-top:48px;padding-top:32px;border-top:1px solid #ECECEC;display:flex;flex-direction:column;gap:18px}
.zk-outros-topo{display:flex;justify-content:space-between;align-items:center}
.zk-outros-topo h2{font-size:22px;font-weight:normal;color:#333}
.zk-outros-setas{display:flex;gap:8px}
.zk-outros-setas button{width:44px;height:44px;border-radius:50%;border:1px solid #E3E3E6;background:#FFF;color:#1d2327;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zk-outros-setas .zk-outros-proximo{border:0;background:#1d2327;color:#FFF}
.zk-outros-janela{overflow:hidden}
.zk-outros-lista{display:flex;gap:20px;transition:transform .3s ease}
.zk-outros-lista li{flex:0 0 calc((100% - 60px) / 4)}
.zk-outros-lista a{display:flex;flex-direction:column;gap:2px;border:1px solid #EDEDF0;border-radius:12px;overflow:hidden;text-decoration:none;color:#1d2327;background:#FFF}
.zk-outros-foto{height:170px;position:relative;background:#F2F2F2;display:block;margin-bottom:10px}
.zk-outros-foto img{width:100%;height:100%;object-fit:cover;display:block}
.zk-outros-foto em{position:absolute;top:10px;left:10px;background:#B40000;color:#FFF;font-size:10px;font-weight:bold;font-style:normal;padding:3px 7px;border-radius:4px}
.zk-outros-marca{padding:0 16px;font-size:11px;color:#767676;text-transform:uppercase;font-weight:bold}
.zk-outros-lista strong{padding:0 16px;font-size:15px;color:#B01717}
.zk-outros-preco{padding:4px 16px 6px;font-size:16px;font-weight:bold;color:#1d2327;display:block}
.zk-outros-preco small{font-size:11px;font-weight:normal;color:#767676}
.zk-outros-lojas{padding:0 16px 14px;font-size:12px;color:#555}
/* Cards com a mesma altura (com ou sem preço): o card ocupa a altura da linha e "Disponível em" fica no rodapé */
.zk-outros-lista li{display:flex}
.zk-outros-lista a{flex:1}
.zk-outros-lojas{margin-top:auto}