/* UAEPC offer banner (.uob) — self-contained component, approved 2026-08-04.
   Scoped reset first: pages have no global reset and their h2/figure rules
   must not leak in. Order matters — component rules below override the reset. */
.uob, .uob * { margin: 0; padding: 0; box-sizing: border-box; }
.uob{background:#fff;position:relative;border-radius:22px;
  max-width:min(1200px,calc(100% - 32px));margin:16px auto;
  border:1px solid #e8eaed;box-shadow:0 10px 30px rgba(10,14,26,.08);overflow:hidden}
.uob::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:#ee1320}
.uob-in{display:flex;align-items:center;gap:36px;padding:26px 40px 22px}
.uob-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.uob-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.uob-logo{font-family:Inter,'Segoe UI',Tahoma,sans-serif;font-weight:900;font-size:19px;color:#000}
.uob-logo b{color:#ee1320}
.uob-eb{display:inline-block;background:#ee1320;color:#fff;font-weight:800;
  font-size:13px;padding:4px 13px;border-radius:7px}
.uob[dir=ltr] .uob-eb{letter-spacing:2px}
.uob-h{font-size:clamp(22px,2.6vw,34px);line-height:1.18;font-weight:900;color:#000}
.uob-h b{color:#ee1320}
.uob-sub{font-size:clamp(14px,1.4vw,17px);font-weight:700;color:#3d3f45}
.uob-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uob-chip{display:flex;align-items:center;gap:9px;background:#f8f9fb;
  border:2px solid #e3e5ea;border-radius:10px;padding:6px 13px}
.uob-chip .c{font-family:Inter,'Segoe UI',Tahoma,sans-serif;direction:ltr;unicode-bidi:isolate;
  font-weight:900;font-size:clamp(13px,1.3vw,16px);color:#000}
.uob-chip .p{font-size:clamp(12px,1.2vw,15px);font-weight:800;color:#ee1320;white-space:nowrap}
.uob-chip .pw{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25}
.uob-chip .pu{font-size:clamp(10px,1vw,12px);font-weight:700;color:#6b7078;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate}
.uob-bot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.uob-cta{display:inline-block;background:#ee1320;color:#fff;font-weight:900;
  font-size:clamp(13px,1.3vw,16px);padding:10px 24px;border-radius:10px;
  box-shadow:0 8px 24px rgba(238,19,32,.28);text-decoration:none}
.uob-cta:hover{background:#d10f1c;color:#fff}
.uob-meta{font-size:clamp(11px,1.1vw,13px);font-weight:700;color:#6b7078}
/* photo slider: native scroll-snap, swipe with a finger */
.uob-ph{flex:none;width:min(560px,44%)}
.uob-strip{overflow:hidden;border-radius:18px;position:relative}
.uob-strip figure{aspect-ratio:3/4;border-radius:18px;overflow:hidden;height:auto;
  border:2px solid #e3e5ea;box-shadow:0 12px 28px rgba(10,14,26,.14);background:#fff}
.uob-strip img{width:100%;height:100%;object-fit:cover;display:block;
  user-select:none;-webkit-user-drag:none}
.uob-dots{display:flex;justify-content:center;gap:7px;margin-top:9px}
.uob-dots i{width:8px;height:8px;border-radius:50%;background:#d7dade;cursor:pointer;transition:.2s}
.uob-dots i.on{background:#ee1320;width:20px;border-radius:5px}
@media(max-width:900px){
  .uob-in{flex-direction:column;align-items:stretch;gap:16px;padding:22px 18px 18px}
  .uob-ph{width:100%}
}
/* dark-navy variant (owner's pick 2026-08-04) — add class uob--dark */
.uob--dark{background:linear-gradient(135deg,#0a0e1a,#161d31 55%,#0a0e1a);border-color:#232a3f}
.uob--dark .uob-logo{color:#fff}
.uob--dark .uob-h{color:#fff}
.uob--dark .uob-sub{color:#c7cede}
.uob--dark .uob-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.uob--dark .uob-chip .c{color:#fff}
.uob--dark .uob-chip .pu{color:#9aa3b8}
.uob--dark .uob-meta{color:#9aa3b8}
.uob--dark .uob-strip figure{border-color:#232a3f}
.uob--dark .uob-dots i{background:#3a4257}
.uob--dark .uob-dots i.on{background:#ee1320}

/* yellow bg + red frames (owner's pick 2026-08-04) - class uob--y */
.uob--y{background:linear-gradient(135deg,#ffd21a,#f5c400 55%,#eab500);
  border:2px solid #c01020}
.uob--y::before{background:#c01020}
.uob--y .uob-logo{color:#111}
.uob--y .uob-logo b{color:#c01020}
.uob--y .uob-eb{background:#c01020;color:#fff}
.uob--y .uob-h{color:#111}
.uob--y .uob-h b{color:#c01020}
.uob--y .uob-sub{color:rgba(17,17,17,.82)}
.uob--y .uob-chip{background:#fff;border:2px solid #c01020}
.uob--y .uob-chip .c{color:#111}
.uob--y .uob-chip .p{color:#c01020}
.uob--y .uob-chip .pu{color:rgba(17,17,17,.55)}
.uob--y .uob-cta{background:#c01020;color:#fff;box-shadow:0 8px 24px rgba(192,16,32,.4)}
.uob--y .uob-meta{color:rgba(17,17,17,.72)}
.uob--y .uob-strip figure{border:2px solid #c01020}
.uob--y .uob-dots i{background:rgba(17,17,17,.3)}
.uob--y .uob-dots i.on{background:#c01020}