/* Photon Cap add-on (upsell1), direct response in the PDP style: General Sans body,
   Cabinet Grotesk headings, navy CTA. Big real timer, buy box in the first screen,
   visual comparison, closing buy box. Header from abl-checkout-shopify.css, footer from
   abl-policy.css. */
.abl-upsell { font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#2C3340; background:#f7f8fa; }
.abl-up { max-width:640px; margin:0 auto; padding:18px 16px 40px; }
.abl-up h1,.abl-up h2 { font-family:'Cabinet Grotesk','General Sans',sans-serif; color:#0A1628; letter-spacing:-.01em; }

/* Quiet confirmation, then the loud timer. */
.abl-up-confirm { display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:8px 16px; background:#fff; color:#66707B; font-size:12.5px; }
.abl-up-confirm svg { width:14px; height:14px; flex:none; padding:2px; border-radius:50%; background:#16794a; fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.abl-up-timer { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px; padding:12px 16px; background:#0A1628; color:#fff; text-align:center; box-shadow:0 6px 18px rgba(10,22,40,.18); }
.abl-up-timer-label { font-size:14px; font-weight:600; letter-spacing:.01em; }
.abl-up-timer-clock { display:inline-block; min-width:4ch; padding:4px 12px; border-radius:8px; background:#e5484d; color:#fff; font:700 24px/1.1 'Cabinet Grotesk','General Sans',sans-serif; font-variant-numeric:tabular-nums; }
.is-expired .abl-up-timer { background:#5d6773; box-shadow:none; }
.is-expired .abl-up-timer-clock { display:none; }

/* Hero: headline, visual comparison, buy box. */
.abl-up-hero { padding:20px 16px 22px; border:1px solid #e6e7e9; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(10,22,40,.06); text-align:center; }
.abl-up h1 { margin:0 0 8px; font-size:27px; line-height:1.12; }
.abl-up-sub { margin:0 auto 16px; max-width:460px; font-size:14.5px; line-height:1.5; color:#454e59; }

.abl-up-duo { display:grid; grid-template-columns:1fr auto 1.25fr; align-items:center; gap:6px; margin:0 0 14px; }
.abl-up-duo-card { position:relative; margin:0; padding:8px 8px 10px; border:1px solid #e6e7e9; border-radius:14px; background:#f7f8fa; }
.abl-up-duo-card img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:10px; background:#f2f2f2; }
.abl-up-duo-card figcaption { margin-top:8px; line-height:1.25; }
.abl-up-duo-card strong { display:block; color:#0A1628; font-size:13px; }
.abl-up-duo-card span { display:block; color:#66707B; font-size:11px; }
.abl-up-duo-card--win { border:2px solid #0A1628; background:#eef7ff; }
.abl-up-duo-tag { position:absolute; top:-10px; left:50%; transform:translateX(-50%); padding:3px 8px; border-radius:999px; background:#0A1628; color:#fff !important; font-size:10px !important; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.abl-up-duo-plus { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#0A1628; color:#fff; font-size:18px; font-weight:600; }

.abl-up-checks { margin:0 auto 18px; padding:0; max-width:420px; list-style:none; text-align:left; }
.abl-up-checks li { display:grid; grid-template-columns:44px 44px 1fr; align-items:center; padding:8px 0; border-top:1px solid #eef0f2; font-size:13.5px; color:#0A1628; }
.abl-up-checks li:first-child { border-top:0; padding:0 0 4px; }
.abl-up-checks-head span { color:#66707B; font-size:10.5px; font-weight:600; text-align:center; text-transform:uppercase; letter-spacing:.04em; }
.abl-up-checks .yes,.abl-up-checks .no { justify-self:center; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:700; line-height:1; }
.abl-up-checks .yes { background:#0A1628; color:#fff; }
.abl-up-checks .no { background:#e6e7e9; color:#8a929c; }

.abl-up-buy { padding-top:16px; border-top:1px dashed #d6dbe1; }
.abl-up-price { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px 10px; margin:0 0 12px; }
.abl-up-price s { font-size:16px; color:#8a929c; }
.abl-up-price strong { font-size:26px; font-weight:700; color:#0A1628; }
.abl-up-save { padding:3px 8px; border-radius:6px; background:#e8f6ee; color:#16794a; font-size:12px; font-weight:700; }

.abl-up-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:58px; padding:14px 18px; border-radius:12px; background:#0A1628; color:#fff; font-size:17px; font-weight:700; text-align:center; text-decoration:none; box-shadow:0 8px 20px rgba(10,22,40,.22); transition:background .15s ease, transform .15s ease; }
.abl-up-cta:hover { background:#132743; }
.abl-up-cta:active { transform:scale(.99); }
.abl-up-cta svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.abl-up-cta.next-loading,.abl-up-cta.next-disabled { opacity:.7; pointer-events:none; }
.abl-up-note { margin:9px 0 0; font-size:12px; color:#66707B; }
.abl-up-expired { margin:12px 0 0; font-size:14px; font-weight:600; color:#0A1628; }
.abl-up-decline { display:block; margin-top:12px; text-align:center; font-size:13px; color:#8a929c; text-decoration:underline; text-underline-offset:3px; }
.abl-up-decline:hover { color:#0A1628; }
.is-expired .abl-up-cta { background:#c9ced4; box-shadow:none; pointer-events:none; cursor:default; }
.is-expired .abl-up-decline { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:12px; background:#0A1628; color:#fff; font-size:15px; font-weight:600; text-decoration:none; }

/* Three quick visuals. */
.abl-up-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.abl-up-tiles li { display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px; border:1px solid #e6e7e9; border-radius:14px; background:#fff; text-align:center; }
.abl-up-tiles svg { width:26px; height:26px; margin-bottom:4px; fill:none; stroke:#0A1628; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.abl-up-tiles strong { color:#0A1628; font-size:13.5px; }
.abl-up-tiles span { color:#66707B; font-size:11.5px; }

.abl-up-why { margin:16px 0 0; padding:18px 18px 16px; border:1px solid #e6e7e9; border-radius:16px; background:#fff; }
.abl-up-why h2 { margin:0 0 6px; font-size:19px; }
.abl-up-why p { margin:0; font-size:14px; line-height:1.6; color:#454e59; }
.abl-up-why .abl-up-fine { margin-top:10px; font-size:11px; color:#66707B; }

/* Closing order box. */
.abl-up-order { margin:16px 0 0; padding:20px 18px 18px; border:2px solid #0A1628; border-radius:18px; background:#fff; text-align:center; }
.abl-up-order-timer { margin:0 0 6px; font-size:13px; color:#454e59; }
.abl-up-order-timer strong { color:#e5484d; font-variant-numeric:tabular-nums; }
.abl-up-order h2 { margin:0 0 6px; font-size:20px; }
.abl-up-order h2 span { color:#66707B; font-family:'General Sans',sans-serif; font-size:14px; font-weight:500; }
.is-expired .abl-up-order-timer strong { display:none; }

/* Footer base (the PDP gets these from abl-pdp-buybox.css). */
.abl-upsell ~ .abl-funnel-footer { text-align:center; padding:48px 20px 40px; font:12px/1.6 'General Sans',sans-serif; }
.abl-upsell ~ .abl-funnel-footer img { display:block; margin:auto; object-fit:contain; }

@media (min-width:760px) {
  .abl-up { padding:24px 24px 56px; }
  .abl-up-hero { padding:22px 32px 24px; }
  .abl-up-sub { margin-bottom:12px; }
  .abl-up h1 { font-size:31px; }
  .abl-up-timer-label { font-size:16px; }
  .abl-up-timer-clock { font-size:28px; }
  .abl-up-duo { gap:12px; max-width:360px; margin:0 auto 12px; }
  .abl-up-duo-card strong { font-size:15px; }
}
@media (max-width:749px) { .abl-checkout-header>div { padding:14px 16px; } }
@media (prefers-reduced-motion:reduce) { .abl-up-cta { transition:none; } }
.abl-up-sub strong { color:#0A1628; }
.abl-up-easy { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; margin:10px 0 0; padding:0; list-style:none; font-size:12px; font-weight:500; color:#454e59; }
.abl-up-easy li::before { content:'✓'; margin-right:5px; color:#16794a; font-weight:700; }
/* Phones: keep the first buy button above the fold. */
@media (max-width:759px) {
  .abl-up { padding-top:12px; }
  .abl-up-hero { padding:16px 14px 18px; }
  .abl-up h1 { font-size:24px; }
  .abl-up-sub { margin-bottom:12px; font-size:13.5px; }
  .abl-up-duo { margin-bottom:8px; }
  .abl-up-duo-card { padding:6px 6px 8px; }
  .abl-up-checks { margin-bottom:12px; }
  .abl-up-checks li { padding:6px 0; font-size:13px; }
  .abl-up-buy { padding-top:12px; }
  .abl-up-price { margin-bottom:10px; }
}

/* Supply upgrade pages (upgrade-*.html), same system as the cap page. */
.abl-ug-eyebrow { display:inline-block; margin:0 0 10px; padding:4px 10px; border-radius:999px; background:#e8f6ee; color:#16794a; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.abl-ug-hook { margin:0 auto 16px; max-width:480px; font-size:15px; line-height:1.55; color:#0A1628; font-weight:500; }
.abl-ug-visual { position:relative; margin:0 auto 14px; max-width:360px; }
.abl-ug-visual img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px; border:1px solid #e6e7e9; }
.abl-ug-steps { position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 6px 18px rgba(10,22,40,.12); }
.abl-ug-step { display:flex; flex-direction:column; align-items:center; padding:4px 10px; border-radius:8px; color:#66707B; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.abl-ug-step strong { color:#0A1628; font:700 17px/1.1 'Cabinet Grotesk','General Sans',sans-serif; letter-spacing:0; text-transform:none; }
.abl-ug-step--to { background:#0A1628; color:#a9c7e8; }
.abl-ug-step--to strong { color:#fff; }
.abl-ug-arrow { color:#0A1628; font-size:20px; font-weight:700; }

.abl-ug-table { display:grid; margin:0 auto; max-width:460px; border:1px solid #e6e7e9; border-radius:12px; overflow:hidden; text-align:left; font-size:13.5px; }
.abl-ug-table [role=row] { display:grid; grid-template-columns:1fr 74px 84px; align-items:center; border-top:1px solid #eef0f2; }
.abl-ug-table [role=row]:first-child { border-top:0; }
.abl-ug-table span { padding:10px 10px; }
.abl-ug-table [role=rowheader] { color:#0A1628; }
.abl-ug-table-head { background:#f7f8fa; }
.abl-ug-table-head span { padding:8px 6px; color:#454e59; font-size:11px; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.04em; }
.abl-ug-table-head span:last-child { background:#0A1628; color:#fff; }
.abl-ug-table [role=cell] { display:flex; justify-content:center; }
.abl-ug-table [role=cell]:last-child { align-self:stretch; align-items:center; background:#eef7ff; }
.abl-ug-table .yes::before,.abl-ug-table .no::before { content:''; width:18px; height:18px; border-radius:50%; background:#0A1628 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.abl-ug-table .no::before { background:#e6e7e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a929c' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/9px no-repeat; }

.abl-ug-pack { margin:0 0 6px; color:#0A1628; font:700 17px/1.25 'Cabinet Grotesk','General Sans',sans-serif; }
.abl-ug-offer { margin:0 auto 14px; max-width:440px; font-size:13.5px; line-height:1.5; color:#454e59; }
.abl-ug-math { margin:10px auto 0; max-width:440px; padding:8px 12px; border-radius:10px; background:#fff7e6; color:#7a4b00; font-size:12.5px; font-weight:600; line-height:1.45; }

.abl-ug-review { margin:16px 0 0; padding:18px 18px 16px; border:1px solid #e6e7e9; border-radius:16px; background:#fff; text-align:center; }
.abl-ug-stars { color:#0A1628; font-size:18px; letter-spacing:2px; }
.abl-ug-review blockquote { margin:8px 0 6px; color:#0A1628; font:600 17px/1.4 'Cabinet Grotesk','General Sans',sans-serif; }
.abl-ug-review figcaption { color:#66707B; font-size:12px; }
.abl-ug-fine { margin:14px 0 0; text-align:center; font-size:11.5px; color:#66707B; }
@media (max-width:759px) {
  .abl-ug-hook { font-size:14px; margin-bottom:12px; }
  .abl-ug-visual { max-width:220px; margin-bottom:10px; }
  .abl-ug-steps { left:6px; right:6px; bottom:6px; padding:6px; }
  .abl-ug-step strong { font-size:15px; }
  .abl-ug-table { margin-bottom:14px; font-size:13px; }
  .abl-ug-table span { padding:8px 8px; }
}

.abl-ug-compare h2 { text-align:center; }