
  <style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --blue:   #1a56db;
    --blue-lt:#eff6ff;
    --green:  #16a34a;
    --g50:    #f9fafb;
    --g100:   #f3f4f6;
    --g200:   #e5e7eb;
    --g300:   #d1d5db;
    --g400:   #9ca3af;
    --g500:   #6b7280;
    --g600:   #4b5563;
    --g700:   #374151;
    --g800:   #1f2937;
    --r:      10px;
    --font:   'Inter', system-ui, sans-serif;
  }
  body { font-family: var(--font); background: var(--g50); color: var(--g800); line-height: 1.6; }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }

  /* ── BANNER ── */
  .banner {
    background: linear-gradient(90deg, #ea580c, #f59e0b, #ea580c);
    background-size: 200%; animation: bm 5s linear infinite;
    padding: 10px 16px; text-align: center;
    position: sticky; top: 0; z-index: 100;
  }
  @keyframes bm { 0%{background-position:0%} 100%{background-position:200%} }
  .banner-inner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
  .banner-title { font-weight: 800; font-size: .95rem; color: #000; text-transform: uppercase; letter-spacing: .04em; }
  .banner-badge { display: flex; align-items: center; gap: 8px; background: #000; color: #fff; padding: 4px 12px; border-radius: 6px; font-size: .82rem; font-weight: 700; }
  .banner-badge .pct { color: #fde68a; }
  .timer-label { border-left: 1px solid #374151; padding-left: 8px; }
  #timer { font-family: monospace; font-weight: 800; }

  /* ── NAV ── */
  nav { background: #fff; border-bottom: 1px solid var(--g200); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
  .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; }
  .nav-logo { font-size: 1.25rem; font-weight: 800; color: var(--g800); }
  .nav-logo span { color: var(--blue); }
  .nav-secure { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--green); font-weight: 600; }

  /* ── LAYOUT ── */
  .page-wrap { max-width: 1100px; margin: 0 auto; padding: 36px 24px 60px; }
  .checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: flex-start; }

  /* ── CARD ── */
  .card { background: #fff; border: 1px solid var(--g200); border-radius: 14px; overflow: hidden; }
  .card-section { padding: 28px 28px 24px; border-bottom: 1px solid var(--g200); }
  .card-section:last-child { border-bottom: none; }
  .step-label { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--g800); margin-bottom: 18px; }
  .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }

  /* ── PRODUCT ROWS ── */
  .product-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border: 1.5px solid var(--g200); border-radius: var(--r);
    margin-bottom: 10px; background: #fff; transition: border-color .15s, background .15s;
  }
  .product-row.has-qty {
    border-color: var(--blue);
    background: var(--blue-lt);
    box-shadow: 0 0 0 3px rgba(26,86,219,.08);
  }
  .product-row:last-child { margin-bottom: 0; }
  .pr-left { display: flex; align-items: center; gap: 12px; }
  .pr-icon { width: 64px; height: 64px; border-radius: 9px; background: var(--g100);
           border: 1px solid var(--g200); overflow: hidden; flex-shrink: 0; }
.pr-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .product-row.has-qty .pr-icon { border-color: #93c5fd; }
  .pr-name { font-size: .9rem; font-weight: 700; color: var(--g800); }
  .pr-sub  { font-size: .75rem; color: var(--g500); margin-top: 1px; }
  .pr-carriers { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
  .pc-carrier { font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
  .att-tag  { background: #e0f2fe; color: #0369a1; }
  .tmob-tag { background: #fce7f3; color: #be185d; }
  .vzw-tag  { background: #fee2e2; color: #b91c1c; }
  .pr-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .pr-price { text-align: right; }
  .pr-orig { font-size: .75rem; color: var(--g400); text-decoration: line-through; display: block; }
  .pr-sale { font-size: 1rem; font-weight: 800; color: var(--blue); }
  .qty-control { display: flex; align-items: center; border: 1.5px solid var(--g200); border-radius: 8px; overflow: hidden; background: #fff; }
  .qty-btn { width: 30px; height: 30px; display: grid; place-items: center; background: none; border: none; cursor: pointer; font-size: .95rem; color: var(--g700); transition: background .15s; }
  .qty-btn:hover { background: var(--g100); }
  .qty-input { width: 34px; text-align: center; font-weight: 700; font-size: .88rem; border: none; outline: none; color: var(--g800); background: transparent; }

  /* ── FORM ── */
  .fields-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .fields-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .custom-field { display: block; position: relative; margin-bottom: 0; }
  .custom-field input { width: 100%; padding: 12px; border: 1px solid var(--g300); border-radius: 8px; outline: none; font-family: var(--font); font-size: .9rem; color: var(--g800); background: #fff; transition: border-color .15s; }
  .custom-field input:focus { border-color: var(--blue); }
  .custom-field .placeholder { position: absolute; left: 12px; top: 12px; color: var(--g400); transition: all .2s; pointer-events: none; background: #fff; padding: 0 4px; }
  .custom-field input:focus + .placeholder,
  .custom-field input:not(:placeholder-shown) + .placeholder { transform: translateY(-22px) scale(0.85); left: 8px; color: var(--blue); font-weight: bold; }
  .stripe-input { background: #fff; padding: 12px; border-radius: 8px; border: 1px solid var(--g300); margin-top: 4px; min-height: 45px; }

  /* ── PAY BUTTON ── */
  #payButton {
    width: 100%; padding: 18px;
    background: #16a34a; color: #fff;
    font-family: var(--font); font-size: 1.1rem; font-weight: 800;
    border: none; border-radius: 12px; cursor: pointer;
    transition: background .15s, transform .15s;
    box-shadow: 0 4px 16px rgba(22,163,74,.35);
    letter-spacing: .01em;
  }
  #payButton:hover:not(:disabled) { background: #15803d; transform: translateY(-1px); }
  #payButton:disabled { background: var(--g300); color: var(--g400); box-shadow: none; cursor: not-allowed; }

  /* ── ORDER SUMMARY ── */
  .summary-card { background: #fff; border: 1px solid var(--g200); border-radius: 14px; padding: 24px; position: sticky; top: 80px; }
  .summary-title { font-size: 1rem; font-weight: 700; color: var(--g800); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--g200); }

  /* summary line items */
  #summary-items { margin-bottom: 4px; min-height: 40px; }
  .summary-line {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--g100);
    font-size: .85rem;
  }
  .summary-line-name { font-weight: 600; color: var(--g800); }
  .summary-line-sub  { font-size: .72rem; color: var(--g500); margin-top: 1px; }
  .summary-line-price{ font-weight: 700; color: var(--g800); white-space: nowrap; margin-left: 8px; }
  .summary-empty { padding: 12px 0; text-align: center; font-size: .82rem; color: var(--g400); }

  .summary-rows { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
  .summary-row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--g600); }
  .summary-row.discount { color: var(--green); font-weight: 600; }
  .summary-row.ship     { color: var(--blue);  font-weight: 600; }
  .summary-total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 2px solid var(--g200); }
  .summary-total-label { font-size: 1rem; font-weight: 700; }
  .summary-total-price { font-size: 1.9rem; font-weight: 800; color: var(--blue); }

  .summary-guarantee { display: flex; align-items: center; gap: 7px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 12px; margin-top: 16px; font-size: .78rem; color: var(--green); font-weight: 600; }
  .summary-trust { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
  .trust-item { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--g500); }
  .trust-item i { color: var(--g400); font-size: .75rem; width: 14px; text-align: center; }

  /* success */
  #success-screen { text-align: center; padding: 60px 28px;  }
  .checkmark { color: #16a34a; font-size: 72px; margin-bottom: 16px; }

  .hidden { display: none; }
  
  /* ── RESPONSIVE ── */
  @media (max-width: 800px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .summary-card  { position: static; }
    .fields-grid-2 { grid-template-columns: 1fr; }
    .fields-grid-3 { grid-template-columns: 1fr 1fr; }
    .pr-right { gap: 8px; }
  }
  @media (max-width: 480px) {
    .page-wrap { padding: 20px 14px 48px; }
    .card-section { padding: 20px 18px 18px; }
    .fields-grid-3 { grid-template-columns: 1fr; }
    .product-row { flex-wrap: wrap; gap: 10px; }
  }
  </style>