/* ============================
     TOKENS GERAIS (cores/efeitos)
     ============================ */
  :root{

    --card-bg:#fff;               /* fundo do card */
    --card-border:#ececec;        /* borda do card */
    --muted:#757575;              /* texto auxiliar */
    --title:#0f172a;              /* título */
    --price:#0a0a0a;              /* preço */
    --btn-start:#2bb640;          /* botão gradiente início */
    --btn-end:#1a6d2c;            /* botão gradiente fim */
    --photo:#7a3fd1;              /* BG roxo do bloco de foto */
    --badge-red:#DB1515;          /* selo de desconto */
    --badge-green:#359528;        /* selo "Mais vendido" */
    --radius-xl:22px;
    --radius-lg:16px;
    --shadow:0 10px 28px rgba(0,0,0,.08);
  }

  /* ============================
     RESET RÁPIDO + BASE
     ============================ */
  *{box-sizing:border-box}
  
  #checkout-desktop .container, #checkout-mobile .container {
    width:100%;
    max-width:950px;
    margin-inline:auto;
    padding:28px 16px 56px;
  }
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

  /* ============================
     COMPONENTES COMUNS
     ============================ */
  #checkout-desktop .grid, #checkout-mobile .grid { display:grid; gap:22px; }
  #checkout-desktop .card, #checkout-mobile .card {
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:18px;
  }
  #checkout-desktop .card-inner, #checkout-mobile .card-inner {
    display:grid;
    grid-template-columns:130px 1fr;
    gap:16px;
    align-items:center;
  }

  /* Bloco de foto com BG roxo + imagem */
  #checkout-desktop .photo, #checkout-mobile .photo {
    width:116px;height:116px;border-radius:18px;
    background: #ffffff;
    position:relative; overflow:hidden;
    display:block;
  }
  #checkout-desktop .photo img, #checkout-mobile .photo img {
    width:100%; height:100%;
    object-fit:cover; display:block;
  }

  #checkout-desktop .title, #checkout-mobile .title { margin:0 0 8px 0; font-weight:800; line-height:1.1; }
  #checkout-desktop .badges, #checkout-mobile .badges { display:flex; gap:8px; align-items:center; margin:6px 0 1px 0; }
  #checkout-desktop .badge, #checkout-mobile .badge {
    display:inline-flex; align-items:center; justify-content:center;
    padding:.20rem .55rem; border-radius:999px;
    font-weight:700; line-height:1; white-space:nowrap;
  }
  .badge.red{background:var(--badge-red); color:#fff}
  .badge.green{background:var(--badge-green); color:#ffffff}

  #checkout-desktop .price, #checkout-mobile .price { font-weight:900; letter-spacing:.1px; color:var(--price); }
  #checkout-desktop .avista, #checkout-mobile .avista { margin-top:1px;
  font-weight:600;
  color:var(--muted); }

  #checkout-desktop .cta, #checkout-mobile .cta {
    display:block; width:100%;
    border:0; cursor:pointer; text-decoration:none;
    background:linear-gradient(90deg, var(--btn-start), var(--btn-end));
    color:#ffffff; font-weight:900; border-radius:18px;
    padding:14px 18px; text-align:center;
    box-shadow:0 8px 24px rgba(16,185,129,.25);
  }
  #checkout-desktop .cta:hover, #checkout-mobile .cta:hover {
  color: #ffffff; /* <-- Altere aqui para a cor desejada */
}
  #checkout-desktop .cta:active, #checkout-mobile .cta:active { transform:translateY(1px); }

  /* ===========================================
     >>> DESKTOP (marcação #checkout-desktop)
     =========================================== */
  #checkout-desktop{ display:none; }
  #checkout-desktop{
    --fs-title:22px;
    --fs-price:36px;
    --fs-avista:18px;
    --fs-badge:12px;
    --fs-cta:15px;
  }
  #checkout-desktop #checkout-desktop .title, #checkout-mobile .title { font-size:var(--fs-title); }
  #checkout-desktop #checkout-desktop .price, #checkout-mobile .price { font-size:var(--fs-price); }
  #checkout-desktop #checkout-desktop .avista, #checkout-mobile .avista { font-size:var(--fs-avista); }
  #checkout-desktop #checkout-desktop .badge, #checkout-mobile .badge { font-size:var(--fs-badge); }
  #checkout-desktop #checkout-desktop .cta, #checkout-mobile .cta { font-size:var(--fs-cta); }
  #checkout-desktop #checkout-desktop .grid, #checkout-mobile .grid {
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  /* ===========================================
     >>> MOBILE (marcação #checkout-mobile)
     =========================================== */
  #checkout-mobile{ display:block; }
  #checkout-mobile{
    --fs-title:22px;
    --fs-price:26px;
    --fs-avista:16px;
    --fs-badge:10px;
    --fs-cta:14px;
  }
  #checkout-mobile #checkout-desktop .card, #checkout-mobile .card { padding:14px; }
  #checkout-mobile .card + #checkout-desktop .card, #checkout-mobile .card { margin-top:10px; }
  #checkout-mobile #checkout-desktop .title, #checkout-mobile .title {
    font-size:var(--fs-title);
    white-space:nowrap;            /* mantém em UMA linha */
    overflow:hidden;
    text-overflow:ellipsis;        /* caso o título seja muito longo */
  }
  #checkout-mobile #checkout-desktop .price, #checkout-mobile .price { font-size:var(--fs-price);margin:0 0 -5px; }
  #checkout-mobile #checkout-desktop .avista, #checkout-mobile .avista { font-size:var(--fs-avista); }
  #checkout-mobile #checkout-desktop .badge, #checkout-mobile .badge { font-size:var(--fs-badge); }
  #checkout-mobile #checkout-desktop .cta, #checkout-mobile .cta { font-size:var(--fs-cta); }
  #checkout-mobile #checkout-desktop .photo, #checkout-mobile .photo { width:96px;height:96px; }
  #checkout-mobile #checkout-desktop .card-inner, #checkout-mobile .card-inner { grid-template-columns:96px 1fr; }
  #checkout-mobile #checkout-desktop .badges, #checkout-mobile .badges { margin:1px 0 5px; }

  /* ============================
     BREAKPOINTS
     ============================ */
  @media (min-width: 992px){
    #checkout-desktop{ display:block; }
    #checkout-mobile{ display:none; }
  }