/* === KS Cross (F2, 02/08/2026): "Complete sua cama" na PDP ===
   Linguagem visual do site: cards do comparativo (borda #E8E8E8 r10, selecionado
   = borda dourada #C9A227 + fundo #FFFBF0, padrao .ks-comp-card.ks-atual) e CTA
   pilula dourada do btn-buy. Escopo total sob #ks-cross para nao vazar. */

#ks-cross { margin: 32px auto 40px; padding: 24px 20px 24px; max-width: 720px; background: #FFFFFF; border: 1px solid #E8E1D3; border-radius: 14px; box-shadow: 0 2px 10px rgba(35,32,28,.05); font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif; overflow: hidden; }
#ks-cross * { box-sizing: border-box; }

/* filete dourado no topo: assinatura visual do bloco */
#ks-cross::before { content: ''; display: block; height: 4px; margin: -24px -20px 22px; background: linear-gradient(90deg, #F3C969 0%, #C9A227 50%, #F3C969 100%); }

/* reveal na entrada da tela + um brilho dourado unico (chamada de atencao) */
#ks-cross-mount #ks-cross { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
#ks-cross-mount.ksx-vis #ks-cross { opacity: 1; transform: none; animation: ksx-glow 1.2s ease .4s 1; }
@keyframes ksx-glow {
  0% { box-shadow: 0 2px 10px rgba(35,32,28,.05); }
  40% { box-shadow: 0 6px 30px rgba(201,162,39,.5); }
  100% { box-shadow: 0 2px 10px rgba(35,32,28,.05); }
}
@media (prefers-reduced-motion: reduce) {
  #ks-cross-mount #ks-cross { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

#ks-cross .ksx-kicker { display: inline-block; background: linear-gradient(135deg, #F3C969 0%, #e6b84a 100%); color: #1a0d00; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 20px; padding: 5px 13px; margin: 0 0 14px; }
#ks-cross .ksx-titulo { font-size: 19px; font-weight: 800; color: #1a1a1a; letter-spacing: -.01em; margin: 0 0 7px; }
#ks-cross .ksx-sub { font-size: 13px; color: #777777; line-height: 1.55; margin: 0 0 20px; }
#ks-cross .ksx-sub b { color: #1a1a1a; }

#ks-cross .ksx-item { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #E8E8E8; border-radius: 12px; padding: 16px 15px; margin-bottom: 12px; cursor: pointer; background: #FFFFFF; transition: border-color .15s ease, background .15s ease; -webkit-user-select: none; user-select: none; }
#ks-cross .ksx-item.ksx-on { border: 2px solid #C9A227; background: #FFFBF0; padding: 15px 14px; }
#ks-cross .ksx-item:hover { border-color: #C9A227; }
#ks-cross .ksx-item input[type="checkbox"] { margin: 4px 0 0; accent-color: #C9A227; width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
#ks-cross .ksx-thumb { width: 56px; height: 56px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(35,32,28,.05); background: #f3efe4; flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#ks-cross .ksx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ks-cross .ksx-info { flex: 1; min-width: 0; }
#ks-cross .ksx-nome { display: block; font-size: 14px; font-weight: 700; line-height: 1.4; color: #1a1a1a; }
#ks-cross .ksx-nota { display: block; font-size: 12px; color: #777777; line-height: 1.5; margin-top: 6px; }
#ks-cross .ksx-chip { display: inline-block; background: #fdf3dc; color: #8a6820; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; border-radius: 20px; padding: 4px 10px; margin-top: 10px; text-transform: none; }
#ks-cross .ksx-preco { font-size: 14.5px; font-weight: 800; white-space: nowrap; color: #1a1a1a; text-align: right; font-variant-numeric: tabular-nums; margin-left: 6px; }
#ks-cross .ksx-preco s { display: block; color: #b3ab9a; font-weight: 500; font-size: 11px; margin-top: 3px; }

#ks-cross .ksx-switch { display: flex; gap: 8px; margin: 14px 0 2px; }
#ks-cross .ksx-switch button { flex: 1; border: 1px solid #E8E8E8; background: #fff; color: #666; border-radius: 10px; padding: 10px 6px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; line-height: 1.35; text-transform: none; letter-spacing: 0; }
#ks-cross .ksx-switch button.ksx-sel { border: 2px solid #C9A227; color: #1a1a1a; background: #FFFBF0; padding: 9px 5px; }

#ks-cross .ksx-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 4px 14px; font-size: 13px; color: #777777; }
#ks-cross .ksx-total .ksx-v { font-size: 22px; font-weight: 800; color: #1a1a1a; font-variant-numeric: tabular-nums; }

#ks-cross .ksx-cta { display: block; width: 100%; border: none; border-radius: 50px; background: linear-gradient(135deg, #F3C969 0%, #e6b84a 50%, #F3C969 100%); color: #000; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 17px; cursor: pointer; box-shadow: 0 6px 22px rgba(243,201,105,.45); font-family: inherit; transition: transform .15s ease, box-shadow .15s ease; }
#ks-cross .ksx-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(243,201,105,.6); }
#ks-cross .ksx-cta:active { transform: translateY(1px); }
#ks-cross .ksx-frete { text-align: center; font-size: 12px; color: #1e7a45; font-weight: 800; letter-spacing: .02em; margin-top: 13px; }

@media (min-width: 768px) {
  #ks-cross { padding: 28px 26px; }
  #ks-cross::before { margin: -28px -26px 24px; }
  #ks-cross .ksx-thumb { width: 64px; height: 64px; }
  #ks-cross .ksx-item { padding: 18px 17px; }
  #ks-cross .ksx-item.ksx-on { padding: 17px 16px; }
}

/* modo pre-escolha (sem tamanho): sem checkbox, preco "a partir de",
   card convida a escolher o tamanho */
#ks-cross .ksx-item.ksx-pre { cursor: pointer; }
#ks-cross .ksx-preco em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: #9a9384; margin-bottom: 2px; }
#ks-cross.ksx-premode .ksx-cta { background: #FFFFFF; color: #1a1a1a; border: 2px solid #C9A227; box-shadow: none; }
#ks-cross.ksx-premode .ksx-cta:hover { background: #FFFBF0; transform: none; box-shadow: none; }
#ks-cross.ksx-premode .ksx-item input[type="checkbox"] { display: none; }