.backdrop, .backdrop *, .backdrop *::before, .backdrop *::after{box-sizing:border-box}

.backdrop{
  position:fixed;inset:0;background:rgba(14,22,38,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:9999;animation:fade .35s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fall{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.98)}}

.backdrop.closing{animation:fade .4s cubic-bezier(.4,0,.2,1) reverse forwards}
.backdrop.closing .popup{animation:fall .4s cubic-bezier(.4,0,.2,1) forwards}

.popup{
  position:relative;width:min(1060px, 96vw);
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(14,22,38,.45), 0 6px 20px rgba(14,22,38,.15);
  animation:rise .45s cubic-bezier(.2,.7,.2,1) both;
  display:grid;grid-template-columns: 260px 1fr 1fr;
  min-height:520px;
  font-family:'TildaSans',Arial,sans-serif;color:#0E1626;
}

/* ============ PHOTO (far left) ============ */
.photo{
  position:relative;background:#1a2538;overflow:hidden;
}
.photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(14,22,38,.15) 0%, rgba(14,22,38,0) 50%, rgba(14,22,38,.45) 100%);
  pointer-events:none;
}
/* subtle diagonal watermark like the reference */
.popup::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: repeating-linear-gradient(135deg, rgba(14,22,38,.025) 0 10px, transparent 10px 24px);
  z-index:0;
}

/* ============ LEFT ============ */
.left{
  position:relative;padding:40px 36px 36px;display:flex;flex-direction:column;z-index:1;
}
.brand-row{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-bottom:18px}
.logo-un{display:flex;align-items:center}
.logo-un img{height:48px;width:auto;display:block}

h1.title{
  margin:8px 0 10px;font-weight:800;font-size:38px;line-height:1.06;letter-spacing:-.015em;
  text-wrap:balance;text-align:left;
}
h1.title em{font-style:normal;color:#D7142A}
.kicker-rule{
  display:block;width:100%;height:0;background:transparent;border:0;border-top:1px dashed rgba(14,22,38,.1);margin:4px 0 14px;
}
.sub-main{color:#0E1626;font-size:20px;line-height:1.35;font-weight:600;max-width:44ch;margin:22px 0 0;text-align:left;text-wrap:balance}
.sub{color:#6B7487;font-size:16px;line-height:1.5;max-width:44ch;margin:8px 0 0;text-align:left}

.cta{
  margin-top:4px;align-self:flex-start;
  appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:800;
  padding:16px 28px;border-radius:4px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  background:#367eab;color:#fff;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 12px 24px -8px rgba(54,126,171,.55), inset 0 -2px 0 rgba(0,0,0,.2);
  transition:transform .15s, background .15s;
}
.cta:hover{background:#2b6b93;transform:translateY(-1px)}
.cta svg{width:16px;height:16px}

/* ============ RIGHT ============ */
.right{
  position:relative;z-index:1;padding:32px 32px 28px 0;display:flex;flex-direction:column;gap:10px;
  border-left:1px dashed rgba(14,22,38,.08);
}

.product,
.product:link,
.product:visited,
.product:hover,
.product:focus,
.product:active{
  color:inherit;text-decoration:none;
}
.product{
  display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center;
  padding:16px 18px;border-radius:12px;flex:1;min-height:0;
  transition:background .15s, box-shadow .2s;
}
.product:hover{background:#fff;box-shadow:0 10px 24px -12px rgba(14,22,38,.2)}
.thumb{
  width:170px;height:100%;min-height:140px;border-radius:10px;overflow:hidden;background:transparent;
  border:1px solid #E4E7EE;
  display:grid;place-items:center;position:relative;flex-shrink:0;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.placeholder{
  background:linear-gradient(135deg, #FFE89A 0%, #FFCE1F 55%, #E5B200 100%);
  color:#0E1626;font-weight:800;font-size:11px;letter-spacing:.04em;text-align:center;padding:6px;line-height:1.1;
}
.name{font-weight:800;font-size:20px;margin:0 0 4px;color:#0E1626;line-height:1.15}
.specs{color:#6B7487;font-size:14px;font-weight:500;margin-bottom:10px;line-height:1.4}
.prices{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{
  background:#dc3545;color:#fff;font-weight:800;font-size:17px;
  padding:8px 14px;border-radius:4px;white-space:nowrap;
  box-shadow:0 6px 14px -4px rgba(220,53,69,.45), inset 0 -2px 0 rgba(0,0,0,.15);
}

.foot-r{
  margin-top:auto;margin-left:18px;margin-right:18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:10px;border-top:1px dashed rgba(14,22,38,.1);color:#2A3446;font-size:12px;font-weight:600;
}
.foot-r a{color:#D7142A;text-decoration:none;font-weight:700}
.foot-r a:hover{text-decoration:underline}

.popup_close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid #E4E7EE;color:#0E1626;display:grid;place-items:center;
  cursor:pointer;z-index:5;transition:background .15s;
  box-shadow:0 4px 10px rgba(14,22,38,.08);
}
.popup_close:hover{background:#D7142A;color:#fff;border-color:#D7142A}
.popup_close svg{width:14px;height:14px}

/* ----- Variant B: Red hero on left ----- */
.popup.variant-red .left{
  background:radial-gradient(120% 90% at 20% 0%, #FF3A4E 0%, #D7142A 55%, #8A0A18 100%);
  color:#fff;
}
.popup.variant-red .left h1.title{color:#fff}
.popup.variant-red .left h1.title em{color:#FFCE1F}
.popup.variant-red .sub{color:rgba(255,255,255,.85)}

.popup.variant-red .kicker-rule{background:#FFCE1F}
.popup.variant-red .cta{background:#FFCE1F;color:#0E1626}
.popup.variant-red .cta:hover{background:#FFD940;color:#0E1626}
.popup.variant-red .popup_close{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.popup.variant-red .popup_close:hover{background:#FFCE1F;color:#0E1626;border-color:#FFCE1F}
.popup.variant-red::before{background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 24px)}

@media (max-width:820px){
  .popup{grid-template-columns:1fr;min-height:0}
  .photo{display:none}
  .right{display:none}
  .left{padding:20px 20px 22px;border-left:0}
  .left .cta{margin-top:18px;padding:12px 22px;font-size:14px}
  .brand-row{margin-bottom:10px}
  .logo-un img{height:36px}
  .kicker-rule{margin:0 0 10px}
  h1.title{font-size:22px;margin:4px 0 6px}
  .sub-main{font-size:16px;margin:10px 0 0}
  .sub{font-size:13.5px;margin:6px 0 0}
}