/* ════════════════════════════════════════════════════════════
   Settem Checkout Bump — franja del checkout
   Las variables --ss-cb-* se inyectan desde el panel de ajustes.
════════════════════════════════════════════════════════════ */

.ss-cb-zone{ width:100%; box-sizing:border-box; margin:0 0 22px; padding-top:12px; }

.ss-cb{
  position:relative; box-sizing:border-box;
  display:grid; grid-template-columns:300px 1fr auto;
  grid-template-areas:"vid main right";
  gap:28px; align-items:center;
  background-color:var(--ss-cb-bg-base,#0d0d1a);
  background-image:var(--ss-cb-bg-image,none);
  border:var(--ss-cb-border,1px solid rgba(58,130,247,.35));
  border-radius:var(--ss-cb-radius,16px);
  padding:22px;
  color:var(--ss-cb-text,#fff);
  font-family:var(--ss-cb-body-font,inherit);
  transition:border-color .25s, background .25s;
}
.ss-cb *{ box-sizing:border-box; }
.ss-cb.is-added{ border-color:var(--ss-cb-added,#4ade80); }

/* etiqueta / pill */
.ss-cb__eyebrow{
  position:absolute; top:0; left:24px; transform:translateY(-50%);
  background:var(--ss-cb-eyebrow-bg,#e8006a); color:var(--ss-cb-eyebrow-text,#fff);
  font-family:var(--ss-cb-body-font,inherit);
  font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 12px; border-radius:20px; line-height:1.5; white-space:nowrap;
}
.ss-cb.is-added .ss-cb__eyebrow{ background:var(--ss-cb-added,#4ade80); color:#06120a; }
.ss-cb .ey-added{ display:none; }
.ss-cb.is-added .ey-default{ display:none; }
.ss-cb.is-added .ey-added{ display:inline; }

/* video */
.ss-cb__vid{
  grid-area:vid; position:relative; cursor:pointer;
  aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:#16234a center/cover no-repeat;
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.ss-cb__play{
  width:0;height:0; border-left:18px solid #fff;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); transition:transform .15s;
}
.ss-cb__vid:hover .ss-cb__play{ transform:scale(1.12); }
.ss-cb__vid.playing .ss-cb__play{ display:none; }
.ss-cb__badge{
  position:absolute; bottom:8px; left:8px;
  background:rgba(0,0,0,.6); color:#fff; font-size:10px;
  padding:3px 8px; border-radius:5px; letter-spacing:.4px;
}
.ss-cb__vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* main */
.ss-cb__main{ grid-area:main; min-width:0; }
.ss-cb__title{
  margin:0 0 6px; line-height:1;
  font-family:var(--ss-cb-title-font,inherit);
  font-size:var(--ss-cb-title-size,30px);
  letter-spacing:var(--ss-cb-title-spacing,1px);
  text-transform:var(--ss-cb-title-transform,none);
  color:var(--ss-cb-text,#fff);
}
.ss-cb__desc{ margin:0 0 12px; color:var(--ss-cb-muted,rgba(255,255,255,.7)); font-size:13.5px; max-width:46ch; }
.ss-cb__feats{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px; color:var(--ss-cb-text,#fff); }
.ss-cb__feats span{ opacity:.9; }
.ss-cb__feats span::before{ content:"✓"; color:var(--ss-cb-accent,#3a82f7); font-weight:700; margin-right:6px; }

/* right */
.ss-cb__right{ grid-area:right; display:flex; flex-direction:column; align-items:flex-end; gap:12px; min-width:160px; text-align:right; }
.ss-cb__price{
  font-family:var(--ss-cb-title-font,inherit);
  font-size:34px; letter-spacing:1px; line-height:.9; color:var(--ss-cb-text,#fff);
}
.ss-cb__price small{
  display:block; font-family:var(--ss-cb-body-font,inherit);
  font-size:11px; letter-spacing:0; font-weight:500;
  color:var(--ss-cb-muted,rgba(255,255,255,.6)); margin-bottom:2px;
}
.ss-cb__btn{
  background:var(--ss-cb-cta,#e8006a); color:var(--ss-cb-cta-text,#fff);
  border:none; border-radius:9px; padding:14px 22px; cursor:pointer;
  font-family:var(--ss-cb-body-font,inherit); font-weight:700; font-size:14px;
  white-space:nowrap; transition:filter .15s, background .15s; line-height:1;
}
.ss-cb__btn:hover{ filter:brightness(1.08); }
.ss-cb__btn:disabled{ opacity:.6; cursor:wait; }
.ss-cb.is-added .ss-cb__btn{ background:#1f8f4d; }
.ss-cb .label-rm{ display:none; }
.ss-cb.is-added .label-add{ display:none; }
.ss-cb.is-added .label-rm{ display:inline; }

/* pista de scroll (solo mobile) */
.ss-cb__hint{ display:none; }
.ss-cb__chev{ display:inline-block; font-size:18px; line-height:1; }

/* ════════ MOBILE: franja compacta ════════ */
@media (max-width:760px){
  .ss-cb{
    grid-template-columns:var(--ss-cb-thumb-m,96px) 1fr;
    grid-template-areas:"vid main" "right right";
    gap:12px 14px; padding:16px;
  }
  .ss-cb__vid{ aspect-ratio:1/1; align-self:start; }
  .ss-cb__play{ border-left-width:13px; border-top-width:8px; border-bottom-width:8px; }
  .ss-cb__badge{ font-size:8.5px; padding:2px 5px; bottom:5px; left:5px; }
  .ss-cb__title{ font-size:var(--ss-cb-title-size-m,21px); margin-bottom:4px; }
  .ss-cb__desc{ display:none; }
  .ss-cb__feats{ gap:4px 12px; font-size:11.5px; }
  .ss-cb__feats span:nth-child(n+3){ display:none; }
  .ss-cb__right{
    flex-direction:row; align-items:center; justify-content:space-between;
    text-align:left; min-width:0; gap:10px;
    border-top:1px solid rgba(255,255,255,.1); padding-top:12px;
  }
  .ss-cb__price{ font-size:26px; }
  .ss-cb__price small{ display:inline; margin:0 6px 0 0; font-size:10px; }
  .ss-cb__btn{ padding:12px 16px; font-size:13px; flex-shrink:0; }

  .ss-cb__hint{
    display:flex; align-items:center; justify-content:center; gap:7px;
    margin:12px auto 0; padding:0; text-align:center;
    font-size:12.5px; font-weight:600; color:var(--ss-cb-accent,#3a82f7);
    text-decoration:none;
  }
  .ss-cb__chev{ animation:ssCbBob 1.3s ease-in-out infinite; }
  @keyframes ssCbBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
  @media (prefers-reduced-motion:reduce){ .ss-cb__chev{ animation:none; } }
}