/* Arial-compatible fallback keeps the agreed metrics on devices without Arial.
 * Reference Liberation Sans, SIL OFL; see approved-sans-OFL.txt. Native Arial stays first. */
@font-face{font-family:'FF WTB Arial';font-style:normal;font-weight:400;src:url('approved-sans-400.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'FF WTB Arial';font-style:normal;font-weight:700;src:url('approved-sans-700.woff2') format('woff2');font-display:swap;}
/* Extracted approved Aug22 component; data/copy remain production-owned. */
.wtb[data-ff-wtb-approved]{
    --red: #e8312a;
    --red-link: #ff5a52;
    --bg: #111113;
    --surface: #1a1a1d;
    --surface2: #222226;
    --border: #2e2e33;
    --text: #f0f0f2;
    --muted: #8b8b9d;
    --green: #3ecf8e;
    --yellow: #f5c518;
    --fd: 'Barlow Condensed', sans-serif;
    /* Approved bitmap uses Arial-compatible metrics; original HTML's Barlow
       webfont changes wrapping. Keep the bitmap's typography within this card. */
    --fb: Arial, 'FF WTB Arial', Helvetica, sans-serif;

    
    --col-price: 68px;
    --col-buy: 74px;
    --col-gap: 9px;
  font-family:var(--fb);font-size:15px;line-height:1.5;color:var(--text);}
.wtb[data-ff-wtb-approved],.wtb[data-ff-wtb-approved] :not(:where([data-ff-alert-review-header],[data-ff-alert-review-header] *,.ff-alert-share,.ff-alert-share *)){margin:0 !important;padding:0 !important;box-sizing:border-box !important;font-family:inherit !important;line-height:inherit !important;}
  .wtb[data-ff-wtb-approved] {
    margin:0 16px !important;
    background:var(--surface) !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    overflow:hidden !important;
    container-type:inline-size !important;
  }

  .wtb[data-ff-wtb-approved] .wtb-hd {
    display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important;
    padding:16px !important;
    border-bottom:1px solid var(--border) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-hd__t {
    display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important;
    font-size:14px !important; font-weight:700 !important;
    letter-spacing:.13em !important; text-transform:uppercase !important; color:var(--text) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-hd__t::before {
    content:'' !important; flex:0 0 auto !important;
    width:9px !important; height:9px !important; border-radius:50% !important; background:var(--red) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-hd__n { flex:0 0 auto !important; font-size:13px !important; color:var(--muted) !important; }

  
  .wtb[data-ff-wtb-approved] .wtb-row {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) var(--col-price) var(--col-buy) !important;
    grid-template-areas:"tag  tag   tag"
      "name price buy"
      "meta price buy" !important;
    column-gap:var(--col-gap) !important;
    align-items:center !important;
    padding:14px 16px !important;
    border-bottom:1px solid var(--border) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-row--top { background:rgba(62,207,142,.05) !important; }
  .wtb[data-ff-wtb-approved] .wtb-row--joined { border-bottom:none !important; padding-bottom:10px !important; }
  .wtb[data-ff-wtb-approved] .wtb-row--last { border-bottom:none !important; }   

  .wtb[data-ff-wtb-approved] .wtb-row__tag {
    grid-area:tag !important;
    font-size:11px !important; font-weight:700 !important; letter-spacing:.07em !important; text-transform:uppercase !important;
    color:var(--muted) !important; margin-bottom:4px !important;
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-row--top .wtb-row__tag { color:var(--green) !important; }

  
  .wtb[data-ff-wtb-approved] .wtb-row__store {
    grid-area:name !important;
    font-size:17px !important; font-weight:700 !important; line-height:1.25 !important;
    min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-row__meta {
    grid-area:meta !important;
    font-size:12.5px !important; color:var(--muted) !important; line-height:1.35 !important; margin-top:2px !important;
    min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-flag { font-style:normal !important; }

  .wtb[data-ff-wtb-approved] .wtb-row__price {
    grid-area:price !important;
    justify-self:end !important;
    font-size:19px !important; font-weight:700 !important; line-height:1 !important;
    white-space:nowrap !important; font-variant-numeric:tabular-nums !important; color:var(--muted) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-row--top .wtb-row__price { color:var(--green) !important; }

  .wtb[data-ff-wtb-approved] .wtb-buy {
    grid-area:buy !important;
    width:100% !important;                       
    display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important;
    min-height:42px !important; border-radius:9px !important;
    background:var(--surface2) !important; border:1px solid var(--border) !important; color:var(--text) !important;
    font-size:14.5px !important; font-weight:600 !important; white-space:nowrap !important; text-decoration:none !important;
    transition:background .15s, filter .15s !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-buy:hover { background:#2b2b31 !important; }
  .wtb[data-ff-wtb-approved] .wtb-buy:focus-visible { outline:2px solid var(--red-link) !important; outline-offset:2px !important; }
  
  .wtb[data-ff-wtb-approved] .wtb-buy--primary { background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; font-weight:700 !important; }
  .wtb[data-ff-wtb-approved] .wtb-buy--primary:hover { background:var(--red) !important; filter:brightness(1.1) !important; }

  
  .wtb[data-ff-wtb-approved] .wtb-extra {
    display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px 13px !important;
    padding:0 16px 12px !important;
    background:rgba(62,207,142,.05) !important;
    border-bottom:1px solid var(--border) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-code {
    font-family:inherit !important;
    font-size:10.5px !important; font-weight:700 !important; letter-spacing:.05em !important;
    color:var(--yellow) !important; background:transparent !important;
    border:1px solid rgba(245,197,24,.4) !important;
    border-radius:5px !important; padding:4px 8px !important; cursor:pointer !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-code:hover { background:rgba(245,197,24,.08) !important; }
  .wtb[data-ff-wtb-approved] .wtb-code:focus-visible { outline:2px solid var(--yellow) !important; outline-offset:2px !important; }
  .wtb[data-ff-wtb-approved] .wtb-code.is-copied { color:var(--green) !important; border-color:rgba(62,207,142,.5) !important; }

  .wtb[data-ff-wtb-approved] .wtb-why { display:inline-block !important; }
  .wtb[data-ff-wtb-approved] .wtb-why > summary {
    list-style:none !important; cursor:pointer !important; display:inline-block !important;
    font-size:12.5px !important; font-weight:600 !important; color:var(--muted) !important;
    text-decoration:underline dotted !important; text-underline-offset:3px !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-why > summary::-webkit-details-marker { display:none !important; }
  .wtb[data-ff-wtb-approved] .wtb-why > summary:hover, .wtb[data-ff-wtb-approved] .wtb-why[open] > summary { color:var(--text) !important; }
  .wtb[data-ff-wtb-approved] .wtb-why > summary:focus-visible { outline:2px solid var(--red-link) !important; outline-offset:2px !important; border-radius:3px !important; }
  .wtb[data-ff-wtb-approved] .wtb-why__body {
    width:100% !important; margin-top:8px !important;
    font-size:12.5px !important; color:var(--muted) !important; line-height:1.6 !important;
  }

  
  .wtb[data-ff-wtb-approved] .wtb-alts__lbl {
    padding:13px 16px 2px !important;
    font-size:11px !important; font-weight:700 !important; letter-spacing:.09em !important;
    text-transform:uppercase !important; color:var(--muted) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-alt {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    column-gap:var(--col-gap) !important;
    align-items:center !important;
    padding:11px 16px !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
    text-decoration:none !important; color:var(--text) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-alt:hover { background:rgba(255,255,255,.02) !important; }
  .wtb[data-ff-wtb-approved] .wtb-alt:hover .wtb-alt__store { color:var(--red-link) !important; }
  .wtb[data-ff-wtb-approved] .wtb-alt:focus-visible { outline:2px solid var(--red-link) !important; outline-offset:-2px !important; }
  .wtb[data-ff-wtb-approved] .wtb-alt__l { grid-column:1 !important; min-width:0 !important; }
  .wtb[data-ff-wtb-approved] .wtb-alt__store {
    display:block !important; font-size:15.5px !important; font-weight:600 !important; line-height:1.25 !important;
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-alt__meta {
    display:block !important; font-size:12.5px !important; color:var(--muted) !important; margin-top:1px !important;
    overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
  }
  
  .wtb[data-ff-wtb-approved] .wtb-alt__price {
    grid-column:2 !important;
    min-width:calc(var(--col-price) + var(--col-gap) + var(--col-buy)) !important;
    text-align:end !important;
    font-size:16px !important; font-weight:700 !important; color:var(--muted) !important;
    white-space:nowrap !important; font-variant-numeric:tabular-nums !important;
  }

  
  .wtb[data-ff-wtb-approved] .wtb-exp > summary {
    list-style:none !important; cursor:pointer !important;
    display:flex !important; align-items:center !important; gap:6px !important;
    padding:13px 16px !important; min-height:44px !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
    font-size:14px !important; font-weight:700 !important; color:var(--red-link) !important;
  }
  .wtb[data-ff-wtb-approved] .wtb-exp > summary::-webkit-details-marker { display:none !important; }
  .wtb[data-ff-wtb-approved] .wtb-exp > summary:hover { background:rgba(255,255,255,.02) !important; }
  .wtb[data-ff-wtb-approved] .wtb-exp > summary:focus-visible { outline:2px solid var(--red-link) !important; outline-offset:-2px !important; }
  .wtb[data-ff-wtb-approved] .wtb-exp__less { display:none !important; }
  .wtb[data-ff-wtb-approved] .wtb-exp[open] > summary .wtb-exp__more { display:none !important; }
  .wtb[data-ff-wtb-approved] .wtb-exp[open] > summary .wtb-exp__less { display:inline !important; }

  
  .wtb[data-ff-wtb-approved] .wtb-none { padding:22px 16px !important; text-align:center !important; }
  .wtb[data-ff-wtb-approved] .wtb-none__t { font-size:16px !important; font-weight:700 !important; }
  .wtb[data-ff-wtb-approved] .wtb-none__d { font-size:13px !important; color:var(--muted) !important; margin-top:4px !important; line-height:1.55 !important; }

  
  .wtb[data-ff-wtb-approved] .wtb-ft { padding:13px 16px 15px !important; border-top:1px solid var(--border) !important; }
  .wtb[data-ff-wtb-approved] .wtb-stamp { font-size:12px !important; color:var(--muted) !important; font-variant-numeric:tabular-nums !important; }
  .wtb[data-ff-wtb-approved] .wtb-note { font-size:12px !important; color:var(--muted) !important; line-height:1.6 !important; margin-top:5px !important; text-wrap:pretty !important; }
  .wtb[data-ff-wtb-approved] .wtb-note strong { color:var(--text) !important; font-weight:700 !important; }

  
  /* Keep the owner-confirmed compact rails at normal phone widths. */
  @container (max-width: 320px) or (max-width: 20rem) {
    .wtb[data-ff-wtb-approved] .wtb-row {
      grid-template-columns:minmax(0,1fr) auto !important;
      grid-template-areas:"tag   tag"
        "name  name"
        "meta  meta"
        "price buy" !important;
      row-gap:10px !important;
    }
    .wtb[data-ff-wtb-approved] .wtb-row__price { justify-self:start !important; align-self:center !important; }
    .wtb[data-ff-wtb-approved] .wtb-buy { width:auto !important; min-width:var(--col-buy) !important; padding-inline:16px !important; }
    .wtb[data-ff-wtb-approved] .wtb-alt__price { min-width:0 !important; }
  }

  
  @media (prefers-reduced-motion: reduce) { .wtb[data-ff-wtb-approved] .wtb-buy { transition:none !important; } }
  @media (prefers-contrast: more) { .wtb[data-ff-wtb-approved], .wtb[data-ff-wtb-approved] .wtb-row, .wtb[data-ff-wtb-approved] .wtb-alt { border-color:var(--text) !important; } }

.wtb[data-ff-wtb-approved] .wtb-flag img{width:16px;height:auto;vertical-align:-2px;}
.wtb[data-ff-wtb-approved] .wtb-buy:disabled{opacity:.65;cursor:not-allowed;font-size:12px !important;min-height:42px !important;white-space:normal !important;overflow-wrap:anywhere;min-width:0 !important;line-height:1.1 !important;padding:4px !important;}

.wtb[data-ff-wtb-approved]{font-family:var(--fb) !important;font-weight:400 !important;line-height:1.5 !important;}
.wtb[data-ff-wtb-approved] .wtb-code{line-height:normal !important;}

/* Existing content columns already own their outer gutters. */
.ff-wtb-approved-slot{width:100%;min-width:0;}
.ff-wtb-approved-slot>.wtb[data-ff-wtb-approved]{margin:0 !important;}

.ff-wtb-tl-top-host>.wtb[data-ff-wtb-approved]{margin:0 !important;}

/* Keep the approved identity alignment independent of editorial parent styles. */
.wtb[data-ff-wtb-approved]{text-align:left !important;}

/* Both native article families align to their existing editorial column. */
.ffe-article-flow .wtb[data-ff-wtb-approved]{margin-inline:0 !important;}
.ct-inner-content>.ff-wtb-approved-slot{box-sizing:border-box;padding-inline:16px !important;}

/* Existing alert and share actions retain native behavior outside the original card. */
.ff-wtb-approved-actions{display:flex;justify-content:flex-end;width:100%;min-width:0;padding:8px 0 0;box-sizing:border-box;}

/* Match the reference font's fractional advances when loaded as a webfont. */
.wtb[data-ff-wtb-approved],.wtb[data-ff-wtb-approved] *{text-rendering:geometricPrecision !important;}

/* Original component canvas and balanced placement in every consuming template.
 * Internal approved typography, rows, states and actions are unchanged. */
[data-ff-pre-rankings-release] :is([data-editorial-rank],[data-supporting-evidence])>.wtb[data-ff-wtb-approved][data-product-id],
.ff-wtb-approved-slot>.wtb[data-ff-wtb-approved],
.ff-wtb-tl-top-host>.wtb[data-ff-wtb-approved],
.ffe-article-flow .wtb[data-ff-wtb-approved],
.wtb[data-ff-wtb-approved]{width:calc(100% - 32px)!important;max-width:398px!important;margin:16px auto!important;}
.ff-wtb-canonical-coverage{width:100%;margin:16px 0;}
.ff-wtb-canonical-product{width:100%;max-width:430px;margin:24px auto;}
.ff-wtb-canonical-product>h1,.ff-wtb-canonical-product>h2,.ff-wtb-canonical-product>h3{margin:0 16px 12px;overflow-wrap:anywhere;}

/* Existing article/ranking hosts already supply the outer gutters. */
.ff-wtb-approved-slot>.wtb[data-ff-wtb-approved],
.ff-wtb-tl-top-host>.wtb[data-ff-wtb-approved],
.ff-sp26-card>.wtb[data-ff-wtb-approved],
.ct-shortcode>.wtb[data-ff-wtb-approved]{width:100%!important;}
